<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>The Forensics Of React Server Components (RSCs) — Smashing Magazine</title><link rel="preconnect" href="https://archive.smashing.media"><link rel="preconnect" href="https://smashingcomments.netlify.app" crossorigin=""><link rel="preconnect" href="https://res.cloudinary.com"><link rel="preconnect" href="https://www.google-analytics.com/"><link rel="preconnect" href="https://storage.googleapis.com"><style>@font-face{font-family:Elena;src:url(/fonts/ElenaWebRegular/ElenaWebRegular-subset-v2.woff2)format("woff2"),url(/fonts/ElenaWebRegular/ElenaWebRegular.woff)format("woff")}@font-face{font-family:Elena;src:url(/fonts/ElenaWebRegularItalic/ElenaWebRegularItalic-subset-v2.woff2)format("woff2"),url(/fonts/ElenaWebRegularItalic/ElenaWebRegularItalic.woff)format("woff");font-style:italic}@font-face{font-family:Elena;src:url(/fonts/ElenaWebBold/ElenaWebBold-subset-v2.woff2)format("woff2"),url(/fonts/ElenaWebBold/ElenaWebBold.woff)format("woff");font-weight:700}@font-face{font-family:Elena;src:url(/fonts/ElenaWebBoldItalic/ElenaWebBoldItalic-subset.woff2)format("woff2"),url(/fonts/ElenaWebBoldItalic/ElenaWebBoldItalic.woff)format("woff");font-weight:700;font-style:italic}@font-face{font-family:Mija;src:url(/fonts/MijaRegular/Mija_Regular-webfont-subset.woff2)format("woff2"),url(/fonts/MijaRegular/Mija_Regular-webfont.woff)format("woff")}@font-face{font-family:Mija;src:url(/fonts/MijaBold/Mija_Bold-webfont-subset-v2.woff2)format("woff2"),url(/fonts/MijaBold/Mija_Bold-webfont.woff)format("woff");font-weight:700}</style><script>var fontsInServiceWorker=sessionStorage.foutFontsStage1Loaded&&sessionStorage.foutFontsStage2Loaded||'serviceWorker'in navigator&&navigator.serviceWorker.controller!==null&&navigator.serviceWorker.controller.state==='activated',docEl;if(!fontsInServiceWorker&&'fonts'in document){function fetchFonts(a){return Promise.all(a.map(function(a){return document.fonts.load(a)}))}sessionStorage.foutFontsStage2Loaded?document.documentElement.className+=" wf-loaded-stage2":sessionStorage.foutFontsStage1Loaded=!0}if("fonts"in document&&!("connection"in navigator&&navigator.connection.saveData)){let a=new FontFace("Elena","url(/fonts/ElenaWebRegular/ElenaWebRegular-subset-v2.woff2) format('woff2')"),b=new FontFace("Elena","url(/fonts/ElenaWebBold/ElenaWebBold-subset-v2.woff2) format('woff2')",{weight:"700"}),c=new FontFace("Elena","url(/fonts/ElenaWebRegularItalic/ElenaWebRegularItalic-subset-v2.woff2) format('woff2')",{style:"italic"}),d=new FontFace("Mija","url(/fonts/MijaBold/Mija_Bold-webfont-subset-v2.woff2) format('woff2')",{weight:"700"}),e=Promise.all([a.load(),b.load(),d.load(),c.load()]).then(a=>{a.forEach(a=>document.fonts.add(a)),document.documentElement.classList.add('wf-loaded-stage2'),sessionStorage.foutFontsStage2Loaded=!0}).catch(a=>{throw new Error(`Error caught: ${a}`)})}(sessionStorage.foutFontsStage1Loaded&&sessionStorage.foutFontsStage2Loaded||'serviceWorker'in navigator&&navigator.serviceWorker.controller!==null&&navigator.serviceWorker.controller.state==='activated')&&(docEl=document.documentElement,docEl.classList.add('wf-loaded-stage2')),!1 in document&&'addEventListener'in window&&'getComputedStyle'in window&&(window.document.documentElement.className+=' no-js'),window.document.documentElement.className+=' enhanced js'</script><style>@charset "UTF-8";@media(prefers-color-scheme:dark){:root{--article-background-color:linear-gradient(-45deg, #162c35 70%, #0c252f 100%)}}*,::after,::before{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,Arial,sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;overflow-y:scroll}body{margin:0;display:flex;flex-direction:column;background-color:#fff;font-feature-settings:"onum" 1;color:#333;overflow:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Roboto,Roboto Slab,Droid Serif,Segoe UI,system-ui,Arial,sans-serif;font-size:1.125em}body,html{min-height:100%;overflow-x:hidden}img{max-width:100%;position:relative;border-style:none}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}:focus{outline:3px dotted var(--THEME_COLOR_HOVER,#d33a2c)!important;outline-offset:2px}article,figure,header,main,nav,section{display:block}@media(prefers-reduced-data:reduce){.wf-loaded-stage2 .article-header--meta,.wf-loaded-stage2 .article-header--updated,.wf-loaded-stage2 .article__summary::before,.wf-loaded-stage2 .author-post__author-title,.wf-loaded-stage2 .author__desc,.wf-loaded-stage2 .author__desc__title,.wf-loaded-stage2 .btn,.wf-loaded-stage2 .cta--green,.wf-loaded-stage2 .drop-caps+p::first-line,.wf-loaded-stage2 .feature-panel::before,.wf-loaded-stage2 .feature-panel__desc,.wf-loaded-stage2 .form__field__input,.wf-loaded-stage2 .h1,.wf-loaded-stage2 .h2,.wf-loaded-stage2 .h3,.wf-loaded-stage2 .h4,.wf-loaded-stage2 .header__search-results .h2,.wf-loaded-stage2 .header__search-results h2,.wf-loaded-stage2 .meta-box--item,.wf-loaded-stage2 .nav-item,.wf-loaded-stage2 .nl-box__group input[type=email],.wf-loaded-stage2 .partners ul li a,.wf-loaded-stage2 .search .search-input,.wf-loaded-stage2 .subnav a,.wf-loaded-stage2 .tablesaw td:before,.wf-loaded-stage2 body,.wf-loaded-stage2 h1,.wf-loaded-stage2 h2,.wf-loaded-stage2 h3,.wf-loaded-stage2 h4,.wf-loaded-stage2 input[type=email],.wf-loaded-stage2 tbody td,.wf-loaded-stage2 th,.wf-loaded-stage2 time{font-family:-apple-system,BlinkMacSystemFont,Roboto,roboto slab,droid serif,segoe ui,system-ui,Arial,sans-serif!important}}.wf-loaded-stage2 .article-header--meta,.wf-loaded-stage2 .article-header--updated,.wf-loaded-stage2 .author-post__author-title,.wf-loaded-stage2 .btn,.wf-loaded-stage2 .cta--green,.wf-loaded-stage2 .feature-panel::before,.wf-loaded-stage2 .feature-panel__desc,.wf-loaded-stage2 .form__field__input,.wf-loaded-stage2 .h1,.wf-loaded-stage2 .h4,.wf-loaded-stage2 .header__search-results .h2,.wf-loaded-stage2 .header__search-results h2,.wf-loaded-stage2 .nav-item,.wf-loaded-stage2 .search .search-input,.wf-loaded-stage2 .subnav a,.wf-loaded-stage2 .tablesaw td:before,.wf-loaded-stage2 h1,.wf-loaded-stage2 h4,.wf-loaded-stage2 input[type=email],.wf-loaded-stage2 th{font-family:Mija,-apple-system,BlinkMacSystemFont,Roboto,roboto slab,droid serif,segoe ui,system-ui,Arial,sans-serif}.wf-loaded-stage2 .article-header--meta,.wf-loaded-stage2 .article__summary::before,.wf-loaded-stage2 .author__desc,.wf-loaded-stage2 .author__desc__title,.wf-loaded-stage2 .drop-caps+p::first-line,.wf-loaded-stage2 .h2,.wf-loaded-stage2 .h3,.wf-loaded-stage2 .meta-box--item,.wf-loaded-stage2 .nl-box__group input[type=email],.wf-loaded-stage2 .partners ul li a,.wf-loaded-stage2 body,.wf-loaded-stage2 h2,.wf-loaded-stage2 h3,.wf-loaded-stage2 tbody td,.wf-loaded-stage2 time{font-family:Elena,-apple-system,BlinkMacSystemFont,Roboto,roboto slab,droid serif,segoe ui,system-ui,Arial,sans-serif}@media all and (max-width:750px){.c-garfield-the-cat{display:flex;flex-direction:column}.c-garfield-the-cat>*{margin-bottom:0}.article__image,.c-garfield-the-cat>figure{margin:1em auto .25em}.c-garfield-aside--meta{margin-bottom:1em}.c-garfield-the-cat>pre{margin-top:1em}.c-garfield-the-cat .code-toolbar{margin-top:1em}.c-garfield-the-cat .code-toolbar>pre{margin-top:0}.c-garfield-the-cat>pre{margin-bottom:.5rem}.c-garfield-the-cat>table{margin-top:1em;margin-bottom:1em}.c-garfield-the-cat .pull-quote__quotation{margin-top:1em}.drop-caps{display:none}}.js-show-secondary .menu-text--sm,.menu-text--lg,.menu-text--lg--close,.menu-text--sm--close{display:none}.js-show-secondary .menu-text--sm--close{display:block}@media all and (min-width:800px){.js-show-secondary .main-nav__secondary{display:block;top:50px}.js-show-secondary .menu-text--lg--close,.menu-text--lg{display:block}.js-show-secondary .menu-text--lg,.js-show-secondary .menu-text--sm--close,.menu-text--sm{display:none}}.js-show-secondary .main-nav-more-item__button:before{content:"";display:block;margin-left:.35em;width:45px;height:30px;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50.21 35.05'%3E%3Cellipse cx='27.8' cy='32.92' fill='rgba(60,60,60,0.5)' rx='19.64' ry='1.2'/%3E%3Cpath fill='%23fff' d='M46.48 15.53a5.2 5.2 0 00-2-.31 7 7 0 00-1.43.19 7.66 7.66 0 001.19-1.52 7.12 7.12 0 011.12-.13 5.18 5.18 0 012 .31h.05a2.82 2.82 0 011.44 1.24 2.75 2.75 0 01.18 2 2.36 2.36 0 00-.74-.46 2 2 0 01.86 1c.11.45-.23 1-.67.92a1.86 1.86 0 00-.22-1 2.65 2.65 0 00-.29-1 2.74 2.74 0 00-1.49-1.24zM16.56 28.07c.06-.21.37-1.29.19-1.47 0 0 5.18 5.08 7.22-2.7a6 6 0 001.16.62c-.75 7-6.44 3.43-6.44 3.43.22.13.14 1.25.12 1.47-.16 2.2-3 1.63-3.74.11a2.44 2.44 0 01-.14-.34 1.4 1.4 0 001.63-1.12z' class='cls-2'/%3E%3Cpath fill='%23fff' d='M1.26 14.52c.08.23.18.45.28.67v.05c1.26 2.67 3.76 5 6.81 4.61a12 12 0 003.51-1.05 8.6 8.6 0 013.64-1 7.28 7.28 0 00.1 2.65A9.82 9.82 0 0117 18.5s-.77 2.34-.41 3a1 1 0 00-.15-.18 1.28 1.28 0 00-.8-.4 1 1 0 00-.89.7c-.23.45-.24.83-.63 1.17-1 .87-2.17 2-1.79 3.47a2.64 2.64 0 002.06 1.82A1.39 1.39 0 0016 27c.06-.21.36-1.28.18-1.46 0 0 5.19 5.07 7.23-2.7a5.65 5.65 0 001.16.61c1.43.56 3.94.91 6.11-2.07a20.36 20.36 0 005.68 1.13s-1.55-.55-1.61-1.28c0 0 3.84 1 6 0l-2.43-.32a3.69 3.69 0 001.68-.42 5.24 5.24 0 012.46 0c.73.08 1.06-.31 1.54-.78a1.17 1.17 0 00.09.33 2.06 2.06 0 00.12.35 3.21 3.21 0 00.37.65 1.35 1.35 0 001.27.53.92.92 0 00.53-.28 1.2 1.2 0 00.19-1.16 2 2 0 00-.77-.94 1.85 1.85 0 011 1.76c.44.08.78-.48.67-.93a1.13 1.13 0 00-.13-.32 2.4 2.4 0 00-.72-.7 2.26 2.26 0 01.74.45 2.67 2.67 0 00.1-.64v-.3a2.59 2.59 0 00-.28-1A2.65 2.65 0 0046 16.32l-.14-.06-.08-.05h-.06a10.1 10.1 0 00-3.9-.54 6.3 6.3 0 001.59-2.45 3 3 0 01-.12.73s1.61-.69.71-2.95a1 1 0 01.63.49 4.17 4.17 0 00-1.74-2.81 2.35 2.35 0 01.88.17 3.64 3.64 0 00-1.72-1.34l-.27-2.21.88.31s0-.35-.89-.86a7.17 7.17 0 00.36-3.37C39.32 1 38.27 2.48 38 2.94a12.73 12.73 0 00-2.56.26 2.83 2.83 0 011.29-.62 3.87 3.87 0 00-3.23.94s-2.73-2-5.37-1.29c0 0-.27 1.36 1.42 4.77a6.37 6.37 0 00-2.31 2.67 7.38 7.38 0 011.63-1.59s-2.44 2.6-1.46 4.67a3.77 3.77 0 01.35-1.55c0 .4-.24 3.2 1 4.61a9.92 9.92 0 01-.32-2s.37 2.53 3.84 3.6a4.35 4.35 0 01-1.49-1.54 11.65 11.65 0 002.47 1.23c-.61.18-1 .31-1 .31l-.81.38a6.56 6.56 0 01-2.34-1.49h-.07a.58.58 0 01-.31.08.64.64 0 01-.46-.21 5.47 5.47 0 01-1.14-2.91.66.66 0 01-.33-.31 3.48 3.48 0 01-.19-2.24 6.84 6.84 0 00-6.5-.26 18.29 18.29 0 012.43.43s-4.84.26-7.22 3.71c0 0 1.93-2 2.77-1.7a8.44 8.44 0 00-2.1 3A9.13 9.13 0 0012 16c-3.7.78-5.2-1.7-5.79-3.65 0-.13-.08-.25-.11-.37a.14.14 0 000-.07v-.16a.14.14 0 010-.06q-.1-.24-.1-.47v-.05a.68.68 0 000-.14 2.4 2.4 0 010-.24v-.09a.09.09 0 000-.05v-.08a.28.28 0 010-.09v-.12c-.09-2-1.43-2.88-3-1.92C.82 9.6.44 12.35 1.26 14.52zm26.58-3.41v.05z' class='cls-2'/%3E%3C/svg%3E");order:1}.js-show-secondary .main-nav-more-item__button:after{width:15px;height:15px;order:2;background-image:url(/images/icons/close.svg)}.js-show-secondary .main-nav__secondary{display:flex}strong{font-weight:bolder;letter-spacing:0}svg:not(:root){overflow:hidden}button{text-transform:none;cursor:pointer;font:inherit;margin:0}[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}.l-author-bio{display:flex;flex-wrap:wrap;align-items:center}.l-author-bio-content{flex-grow:1;flex-shrink:1;flex-basis:300px}.bio-image__large .bio-image{--bio-image-border-width:8px}.bio-image{padding:0;margin:0;display:block;width:100%;height:100%;border-radius:inherit;position:relative}.bio-image::before{display:block;content:"";height:90%;width:160%;position:absolute;background-image:url();background-size:100%;background-repeat:no-repeat;top:89%;left:-30%;right:0;transform-origin:30% 50%;opacity:1;transition:opacity .3s ease-in-out}.bio-image:hover::before{opacity:0}a.bio-image-link{background:0 0;text-shadow:none;color:inherit;padding:0;display:block;border-radius:inherit;width:100%;height:100%}a.bio-image-link::before{display:block;content:"";height:120%;width:120%;position:absolute;top:-10%;left:-12%}.bio-image-wrapper{background:var(--bio-image-background-color,var(--bio-image-border-color,#d33a2c));border:solid var(--bio-image-border-width,8px)var(--bio-image-border-color,#d33a2c);border-radius:inherit;transform:scale(.84)translateX(15%)rotateZ(-11deg);transform-origin:0 100%;overflow:hidden;width:100%;height:100%;transition:transform .2s ease-out}.bio-image-image{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.2)rotateZ(11deg);transition:transform .2s ease-out}.bio-image-link:active .bio-image-wrapper,.bio-image-link:focus .bio-image-wrapper,.bio-image:hover .bio-image-wrapper{transform:scale(.84)translateX(15%)rotateZ(0)}.bio-image-link:active .bio-image-image,.bio-image-link:focus .bio-image-image,.bio-image:hover .bio-image-image{transform:scale(1.2)rotateZ(0)}.article__content .author-post__author-title{color:#d33a2c;text-decoration-line:underline;font-weight:700;font-size:.9em}.light-grey{color:#767676!important}.rounded img{border-radius:11px}.rounded-3xl{border-radius:1.2em}.block{display:block}.h-48{height:12rem}.mr-3{margin-right:.75rem}.mb-5{margin-bottom:1.25rem}@media all and (max-width:600px){.mobw-40{width:8rem!important}.mobh-40{height:8rem!important}}.w-48{width:12rem}.mt-2{margin-top:.5rem}.mtn{margin-top:0!important}.mbn{margin-bottom:0!important}small{font-size:80%}.row{box-sizing:border-box;display:flex;flex:initial;flex-direction:row;flex-wrap:wrap;margin-right:-1rem;margin-left:-1rem}[class*=col-]{box-sizing:border-box;flex:none;padding-right:1rem;padding-left:1rem}.row::after{clear:both}.col-12{flex-basis:100%;max-width:100%}@media screen and (min-width:48em){.col-12{flex-basis:100%;max-width:100%}}.container{width:calc(100% - .5em);max-width:1440px;margin:0 auto;z-index:1;position:relative}.container::after{content:"";display:table;clear:both}@media(min-width:40em){.container{width:92vw!important}}@media(min-width:48em){.container{width:85vw}}@media(min-width:64em){.container{width:68rem}}@media(min-width:75em){.container{width:79rem}}@media screen and (min-width:160em){.container{max-width:1650px}}@media(min-width:187.5em){.container{max-width:1860px}}.c-garfield-the-cat>p:first-of-type{font-size:1.1em;line-height:1.55em}.c-garfield-the-cat>p:empty{display:none}.c-felix-the-cat{background-color:#f3f3f3;border-left:11px solid #e6e4e1;padding:1em 1em 1em 1.5em;color:#424242;margin-left:0;margin-top:1em;font-size:1.05em;line-height:1.6em;border-radius:11px;background:linear-gradient(to bottom right,#f5f2f0 0,#fff 100%)}.c-felix-the-cat h4{margin-top:.5em}.sponsor-panel{display:flex;justify-content:center;align-items:center}.sponsor-panel-content{flex:3}.sponsor-panel-image{display:none}@media screen and (min-width:1100px){.sponsor-panel-image{display:block;background-image:none;margin-left:1.5em;flex:1}}@media(max-width:1024px){.col{width:100%!important;padding:0 1em}.row{margin-left:0;margin-right:0}.article__content{float:none}.article__content::before{display:none}}#main{position:relative;z-index:0;background-color:#fff}@supports(display:grid){.main-nav{display:grid;align-items:center}}.main-nav{position:relative;display:block;min-width:0;color:#fff;grid-column:span 2;font-size:1.05em}.main-nav__primary .nav-item--active{background:rgba(0,0,0,.1);border-radius:11px}.main-nav__secondary .nav-item--active{background-color:transparent;margin:0}.c-garfield-the-cat figcaption a{color:#666;text-decoration-line:underline;text-decoration-color:#666}.c-garfield-the-cat figcaption a.btn{color:#fff;text-decoration:none}@media all and (min-width:1000px){@supports(grid-row-gap:0){.c-garfield-the-cat{display:grid;grid-template-columns:0 minmax(0,.5fr)repeat(10,minmax(0,1fr)).7fr .3fr 17rem;margin:0 auto}.c-garfield-the-cat ol,.c-garfield-the-cat ul,.c-garfield-the-cat>div,.c-garfield-the-cat>p,.c-garfield-the-cat>table{margin-bottom:1.4em}.c-garfield-the-cat>h2{margin-top:1.5em;margin-bottom:1em}.c-garfield-the-cat>h3,.c-garfield-the-cat>h4{margin-top:1.5em;margin-bottom:.65em}.c-garfield-the-cat>h5{margin-top:.65em;margin-bottom:.65em}.article__image,.c-garfield-the-cat>figure{margin:0 auto 1.4em;width:100%}.c-garfield-the-cat .code-toolbar pre,.c-garfield-the-cat blockquote,.c-garfield-the-cat pre,.c-garfield-the-cat>figure.video-embed-container{margin-bottom:1.7em;margin-top:.3em}.c-garfield-the-cat .code-toolbar{margin-bottom:0}.c-garfield-the-cat>*{grid-column:3/13;margin-top:0;margin-bottom:0}.c-garfield-the-cat .c-garfield-bio{grid-column:1/2;grid-row:1/4;align-self:start}.c-garfield-the-cat .c-garfield-header{grid-column-end:16}.c-garfield-the-cat .c-garfield-aside--meta{grid-column:15/16;grid-row:2/7;align-self:start;margin:0}.c-garfield-the-cat .toc-components li{margin-bottom:.75em}.c-garfield-the-cat>.break-out{grid-column:3/14;width:100%}.c-garfield-the-cat>.break-out img{margin:0 auto}.c-garfield-the-cat>.break-out figcaption{max-width:50em}.article__content .c-garfield-the-cat figcaption{margin:0 auto}.c-garfield-the-cat .c-garfield-native-panel{grid-column:15/16;grid-row:8/15;align-self:start;text-align:center;position:relative}.c-garfield-native-panel__right{grid-column:15/16;grid-row:15/22;align-self:start;text-align:center}.c-garfield-the-cat .c-garfield-native-panel__below{grid-row:19/25}.c-garfield-the-cat .c-garfield-native-panel__end{grid-row:26/33}.feature-panel-container{margin-top:6em;margin-bottom:1em}}}.no-ads .c-garfield-native-panel,.no-panels .feature-panel-container,.subscriber .c-garfield-native-panel,.subscriber .feature-panel-container{display:none!important}figcaption a{color:inherit}figcaption code,figcaption pre{font-style:normal}.article h1,.article h2,.article h3,.article h4,.article h5,.article h6{position:relative}.feature-panel-container{margin-top:2.25em;margin-bottom:1em}.article__image img,.c-garfield-the-cat>figure img{display:block;width:auto;max-width:100%;margin:0 auto;height:auto}.article__image>a,.c-garfield-the-cat>figure>a{display:block;background:0 0;position:relative;z-index:99}.article__image figcaption,.c-garfield-the-cat>figure figcaption{color:#666;font-size:.95em;font-style:italic;padding:.75em 2em .75em 0;display:table}.article__image figcaption a,.c-garfield-the-cat>figure figcaption a{color:#666}.article__image figcaption::before,.c-garfield-the-cat>figure figcaption::before,.internal__page__wrapper figure:not(.bio-image) figcaption::before{content:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 17 13.09%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23c2c2c2%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ecamera%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M8.5 5.44a2.21 2.21.0 102.21 2.21A2.21 2.21.0 008.5 5.44zm6.29-3.23h-2.55A2.21 2.21.0 0010 0H7A2.21 2.21.0 004.76 2.21H2.21a2.21 2.21.0 00-2.21 2.21v6.46a2.21 2.21.0 002.21 2.21h12.58A2.21 2.21.0 0017 10.88V4.42a2.21 2.21.0 00-2.21-2.21zM8.5 11.56a3.91 3.91.0 113.91-3.91A3.91 3.91.0 018.5 11.56z%22/%3E%3C/svg%3E");height:1em;width:1.5em;padding-right:.6em;display:table-cell;vertical-align:baseline;position:relative;top:.05em}.c-garfield-the-cat>figure.article__figure figcaption::before{content:"";display:none}.hidden{display:none!important}.c-garfield-header{clear:both}.c-friskies-box{font-size:.9em;border-radius:11px}.c-friskies-box a:not(.btn){color:#006fc6}.c-friskies-box--ad::before{display:block;white-space:pre-wrap;padding:2em 0 3em;font-size:.85em;font-style:italic;color:#666}.c-friskies-box--ad img{border-top-left-radius:11px;border-top-right-radius:11px}.c-garfield-the-cat .author__desc{font-size:.9em;color:#555}.summary__heading::after{content:"Quick summary ↬ ";font-style:normal;font-size:1rem;letter-spacing:2px;margin:0;font-weight:700;color:#d33a2c;text-transform:uppercase}.c-friskies-box--ad ul{padding-left:0;margin:0}.bnnr-list{display:flex;text-align:center;justify-content:center;flex-direction:row}.partners.c-friskies-box:not(.c-friskies-box--wide) .bnnr-list{flex-direction:column}.c-garfield-the-cat{padding:0 1em}@media screen and (min-width:80em){.c-garfield-the-cat{display:grid;grid-template-columns:0 repeat(11,minmax(0,1fr))1.4fr .6fr 21rem 1fr}}@media screen and (min-width:100em){.c-garfield-the-cat{display:grid;grid-template-columns:0 repeat(11,minmax(0,1fr))1.9fr .4fr 21rem 1fr}}@media screen and (min-width:160em){.c-garfield-the-cat{display:grid;grid-template-columns:18.5rem repeat(11,minmax(0,1fr)).7fr .3fr 18.5rem;grid-column-gap:1.75rem}}@media(min-width:187.5em){.c-garfield-the-cat{display:grid;grid-template-columns:20rem repeat(11,minmax(0,1fr)).7fr .3fr 20rem;grid-column-gap:2.25rem}}.header{background:#d33a2c;background:var(--THEME_COLOR,#d33a2c);position:relative;display:grid;justify-content:flex-start;align-items:center;padding:.8em;z-index:2;grid-template-columns:min-content min-content 1fr;column-gap:5px}@media all and (min-width:31.25em){.header{grid-template-columns:-webkit-min-content -webkit-min-content 0 minmax(100px,100%);grid-template-columns:min-content min-content 0 minmax(100px,100%);column-gap:10px}}@media(min-width:700px){.header{grid-template-columns:-webkit-min-content minmax(140px,2fr)0 minmax(100px,350px);grid-template-columns:min-content minmax(140px,2fr)0 minmax(100px,350px)}}@media(min-width:740px){.header{padding:1rem 2em}}.search{flex-basis:100px;flex-shrink:1}@media screen and (min-width:48em){body{font-size:calc(.35842vw + .95296em)}}body .form__field__label,body li,body p{line-height:calc(1.5em + .2vw);word-break:break-word}body h1{line-height:1.2}.article--post__title a:focus,.article--post__title a:hover{color:#d33a2c}@supports(-ms-ime-align:auto){.article__image figcaption,.c-garfield-the-cat>figure figcaption{display:inline-block}.article__image figcaption::before,.c-garfield-the-cat>figure figcaption::before{display:inline-block}body{font-feature-settings:normal}}::-webkit-input-placeholder{color:#666}::-moz-placeholder{color:#000}:-ms-input-placeholder{color:#666}.article-header--meta-item__date,time{color:#666;font-feature-settings:"smcp" 1,"c2sc" 1;letter-spacing:1px;text-transform:lowercase;background-position:50% 72%}.article-header--meta-item__date{display:flex}.wf-loaded-stage2 time{font-variant:petite-caps}.kbd,kbd{font-size:.9em;padding:.0625rem .5rem;border-radius:.125rem;border:1px solid #d33a2c;box-shadow:1px 1px #d33a2c,2px 2px #d33a2c;margin:0 .25rem;color:#d33a2c;font-family:monospace}figure{margin:0;padding:0}figure:after,figure:before{content:" ";display:table;clear:both}a{padding:7px 0;background-color:transparent;text-decoration-skip-ink:auto;text-decoration-thickness:1px;text-underline-offset:1px;text-decoration-line:underline;color:#006fc6}.h1,h1{font-size:calc(1.625rem + 1.6vw);margin:0}.h2,.h3,.h4,.h5,h2,h3,h4,h5{color:#333}.h2,h2{font-size:calc(1.5rem + .25vw);margin:2em 0 .75em;text-transform:capitalize}.h3,h3{font-size:calc(1.125rem + .25vw);text-transform:uppercase;letter-spacing:1px;margin-top:2em;margin-bottom:1em}h4{font-size:1.1em;margin-top:2em}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{text-transform:none}@keyframes fadeOut-headings{0%{background:#ffde95;box-shadow:-10px 0 0 12px #ffde95}100%{background:#fff1d2;box-shadow:-10px 0 0 12px #fff1d2}}h2:target,h3:target,h4:target,h5:target,h6:target{border-radius:11px;animation:fadeOut-headings .4s;animation-fill-mode:forwards}.article__content h2:target a,.article__content h3:target a,.article__content h4:target a,.article__content h5:target a{color:#d33a2c}:target{scroll-margin-top:2rem}ol,ul{margin:1em 0;max-width:100%}ol{padding:0;list-style:none;counter-reset:listCounter}ol>li{padding-left:calc(1.65em + .7vw);position:relative;counter-increment:listCounter;margin-bottom:1em}ol>li::before{content:counter(listCounter,decimal-leading-zero);font-size:.7em;font-weight:700;color:#d33a2c;left:.8em;position:absolute;font-family:Mija,-apple-system,BlinkMacSystemFont,Roboto Slab,Droid Serif,Segoe UI,system-ui,Arial,sans-serif}ul{list-style:disc}ul>li::marker{color:#d33a2c}ul>li{margin-bottom:.75em;padding-left:.15em}.rh{color:#d33a2c}.menu-text--lg,.menu-text--lg--close,.menu-text--sm--close{display:none}@media(min-width:800px){.search{flex-basis:500px}.main-nav{grid-column:auto}.menu-text--sm{display:none}.menu-text--lg{display:block}}.secondary-nav{position:relative;grid-row-start:2;grid-column:1/5}body:not(.enhanced) .main-nav{overflow-x:auto;-webkit-overflow-scrolling:touch}.main-nav__primary{display:flex;list-style:none;padding:.4em 0;margin:0;flex-wrap:nowrap;width:100%;height:100%;flex-shrink:1;min-width:0;justify-content:flex-start}.main-nav span:empty{display:none}@media all and (min-width:53.125em){.main-nav__primary{justify-content:space-between}}.nav-item{flex-grow:0;background:0 0;text-shadow:none;color:inherit;font-weight:700;display:flex;align-items:center;margin-bottom:0;padding-left:0}.nav-item--active{background:rgba(0,0,0,.1);border-radius:11px}.main-nav-more-item{position:relative;width:145px}@media(min-width:42.9375em){.main-nav-more-item{margin-left:.35em}}@media all and (max-width:52.5em){.main-nav-more-item{justify-content:center}}.main-nav-more-item__button{padding:.4em .5rem .4em 1rem;border:1px solid rgba(0,0,0,5%);color:inherit;display:flex;align-items:center;justify-content:space-around;line-height:1;position:relative;background-color:rgba(0,0,0,.2);border-radius:11px;box-shadow:0 13px 7px -15px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025)}.main-nav-more-item__button,.nav-item-link{white-space:nowrap}.nav-item-link{padding:.35em .9rem;background:0 0;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.25);text-decoration:none}@media screen and (min-width:800px){.main-nav__secondary .nav-item-link{color:#d33a2c!important}}.nav-item-link:focus,.nav-item-link:hover{background-color:rgba(0,0,0,.15);border-radius:11px}.main-nav__secondary .nav-item-link:focus,.main-nav__secondary .nav-item-link:hover{background-color:transparent;box-shadow:none}.main-nav-more-item__button:active,.main-nav-more-item__button:focus,.nav-item-link:active,.nav-item-link:focus{outline-color:var(--THEME_COLOR_OUTLINE,#811d15)!important}.secondary-nav .nav-item-link:active,.secondary-nav .nav-item-link:focus{outline-color:#811d15!important}.main-nav__secondary .nav-item-link{text-shadow:none;width:100%;text-decoration:none;text-decoration-color:#d33a2c;padding:.25em .7rem}.main-nav-more-item__button:after{content:"";display:block;margin-left:9px;width:30px;height:30px;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35.96 33.31'%3E%3Cellipse cx='17.98' cy='31.55' fill='rgba(60,60,60,0.3)' rx='14.75' ry='.57'/%3E%3Cpath fill='%23fff' d='M34.94 15v-.93c-.23-3-2.16-5.93-5.22-6.3-2.31-.28-3.39 1.45-2.4 3.84a.43.43 0 000 .05v.11a.14.14 0 010 .06.63.63 0 000 .09v.17c0 .08.06.18.09.29s0 0 0 .05a1 1 0 000 .17.64.64 0 010 .07c0 .18.1.38.14.6a.24.24 0 010 .08v.29c0 .03.06.33.08.5.37 2.58 0 6.27-4.73 7.37A12.74 12.74 0 0019.7 23c-.17-.65-.36-1.25-.55-1.77a5.16 5.16 0 002.05-2.56 11.26 11.26 0 01-.69 2.33c1.81-1.55 2-5.05 2-5.54a4.72 4.72 0 01.21 2c1.55-2.41-1.17-6-1.17-6a9.67 9.67 0 011.84 2.24C23 11.75 20.82 10 20.82 10c2.65-4 2.51-5.68 2.51-5.68-3.26-1.34-7 .73-7 .73a5.12 5.12 0 00-4-1.7 3.61 3.61 0 011.56 1 16.79 16.79 0 00-3.23-.74C10.41 3 9.4 1.16 6.22 1h-.58S5 3.64 5.61 5.19c-1.15.49-1.26.93-1.26.93l1.17-.25-.67 2.67a4.66 4.66 0 00-2.39 1.38 3 3 0 011.15-.07A5.11 5.11 0 001 13.05a1.32 1.32 0 01.87-.51c-1.47 2.69.49 3.76.49 3.76a3.8 3.8 0 010-.92 8.52 8.52 0 002.19 3.9 14.13 14.13 0 01-.24-1.59 5.46 5.46 0 001.93 2.7 6.25 6.25 0 01-.4-1.52 5.87 5.87 0 001.36 1.75c-.12.24-.24.47-.34.71a12 12 0 00-.7 2.13c0 .23-.09.45-.13.66a1.4 1.4 0 00-1-.31 1.4 1.4 0 00-1.09 1 3.1 3.1 0 000 1.57 9.48 9.48 0 001.8 3.92A2.92 2.92 0 004 30.06c-.56.16-1 .83-.72 1.34H22.6c.29-.51-.16-1.18-.72-1.34a2.92 2.92 0 00-1.71.24A9.48 9.48 0 0022 26.44 3.24 3.24 0 0022 25a15.89 15.89 0 012.87-.21 14.93 14.93 0 004.65-.69c3.72-1.24 5.38-5.25 5.38-9zm-12.49.42h-.05v-.07z'/%3E%3C/svg%3E")}.main-nav__secondary{display:none;color:#fff;padding:.2em 0;flex-wrap:wrap;flex-direction:column;justify-content:flex-start;align-items:flex-start;height:10em}@media all and (min-width:31.25em){.main-nav__secondary .nav-item-link{padding:.25em 1.1rem}.main-nav__secondary{padding:.2em .5em}}@media(-webkit-min-device-pixel-ratio:1.3),(min-resolution:124.8dpi){.main-nav__secondary{height:11em}}@media(min-width:800px){.secondary-nav{grid-row:auto;grid-column:auto}.main-nav__secondary{display:none;position:absolute;top:0;left:-80px;transform:translate(-50%,0);max-width:unset;background:#fff;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);border-radius:11px;margin:0;padding:14px 20px 10px 10px;min-width:180px;color:#d33a2c;flex-direction:row;justify-content:space-between;align-items:center;height:auto}.main-nav__secondary:before{content:"";display:block;position:absolute;top:1px;left:50%;transform:translate(-50%,-100%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid #fff}}.nav-item-1,.nav-item-10,.nav-item-2,.nav-item-3,.nav-item-4,.nav-item-5,.nav-item-6,.nav-item-7,.nav-item-8,.nav-item-9{display:none}.main-nav__secondary .nav-item-1,.main-nav__secondary .nav-item-10,.main-nav__secondary .nav-item-2,.main-nav__secondary .nav-item-3,.main-nav__secondary .nav-item-4,.main-nav__secondary .nav-item-5,.main-nav__secondary .nav-item-6,.main-nav__secondary .nav-item-7,.main-nav__secondary .nav-item-8,.main-nav__secondary .nav-item-9{display:flex}@media(min-width:42.9375em){.nav-item-1{display:flex}.main-nav__secondary .nav-item-1{display:none}}@media(min-width:52.5em){.nav-item-2{display:flex}.main-nav__secondary .nav-item-2{display:none}}@media(min-width:56.5625em){.nav-item-3{display:flex}.main-nav__secondary .nav-item-3{display:none}}@media(min-width:70em){.nav-item-4{display:flex}.main-nav__secondary .nav-item-4{display:none}}@media(min-width:77.8125em){.nav-item-5{display:flex}.main-nav__secondary .nav-item-5{display:none}}@media(min-width:104.375em){.nav-item-6{display:flex}.main-nav__secondary .nav-item-6{display:none}}@media(min-width:113.4375em){.nav-item-7{display:flex}.main-nav__secondary .nav-item-7{display:none}}@media(min-width:120.625em){.nav-item-8{display:flex}.main-nav__secondary .nav-item-8{display:none}}@media(min-width:136.5625em){.nav-item-9{display:flex}.main-nav__secondary .nav-item-9{display:none}}@media(min-width:179.6875em){.nav-item-10{display:flex}.main-nav__secondary .nav-item-10{display:none}.main-nav-more-item{display:none}.main-nav__primary{justify-content:flex-start}.nav-item{padding:0 .65em}.header,.header.searchFocused{grid-template-columns:-webkit-min-content minmax(140px,-webkit-max-content)0 minmax(250px,600px);grid-template-columns:min-content minmax(140px,max-content)0 minmax(250px,600px)}}@media(max-width:480px){.header .search{grid-column:1/5;margin-top:.5em}.main-nav__primary{justify-content:flex-end}.main-nav-more-item{justify-content:flex-end}}.btn--text-shadow,a.btn.btn--text-shadow{text-shadow:1px 1px 1px rgba(0,0,0,.25)}.btn-wrapper{display:none}@media screen and (min-width:1100px){.btn-wrapper{display:block;padding:4px}}.btn,.toolbar-item{display:inline-block;border-radius:11px;text-align:center;color:#fff;text-decoration:none;border:none;font-weight:700;background:0 0;font-size:.9em;outline:0;background-color:#d33a2c;background-image:linear-gradient(to bottom,#f88040,#d33a2c);position:relative;top:-2px;transition:top .1s ease-in-out,box-shadow .1s ease-in-out}.toolbar-item{box-shadow:0 4px #dedada}.toolbar-item{transition:all .3s ease-in-out}.toolbar-item:active,.toolbar-item:focus{position:relative;top:3px}.btn{padding:.5em 1em}.btn.btn--green,.btn.btn--member{background-color:#41b14f;background-image:linear-gradient(#9ec14c,#41b14f);color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.25);box-shadow:0 4px #2d8f39;position:relative}.btn,.btn--blue,.btn--green{position:relative}.btn--blue:focus,.btn--green:focus,.btn:focus{top:3px;box-shadow:0 4px transparent}.cta--green{display:block;padding:.5em;color:#137d54!important;background-color:#d6f3e7;transition:.2s border ease-in-out,.2s box-shadow ease-in-out;border:1px solid #c6f2e0;font-weight:700;text-decoration:none;border-radius:11px;text-align:center;font-size:.85em}.cta--green:hover{background-color:#c8f1e0;border:1px solid #a0dcc4}.cta--green:active,.cta--green:active:hover,.cta--green:focus,.cta--green:focus:hover{background-color:#137d54;color:#fff!important}.btn--white{background:#fff;color:#267dcc;transition:color .1s ease-out;box-shadow:0 4px transparent}.btn--white--bordered,.btn--white--bordered:active,.btn--white--bordered:focus,.btn--white--bordered:hover,.toolbar-item{border:1px solid #ddd}.btn span{color:#811d15;font-size:.8em;margin-left:5px;margin-top:.5em;line-height:1}.btn.btn--medium{font-size:calc(.9em + .1vw);padding:.75em 1em}@media(max-width:64em){pre{max-width:100%}}.input{border:none;display:block;color:#333;background-color:#fff;padding:.4em .75em;border-radius:5.5px;outline:0;font:inherit;margin:0;font-size:1.15rem;width:100%}.input::-webkit-input-placeholder{color:#666}.input:-ms-input-placeholder{color:#666}.input::-moz-placeholder{color:#000}.input::-ms-clear{display:none}.search .search-input{padding-left:52px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 height=%2224%22 width=%2224%22%3E%3Cdefs%3E%3ClinearGradient id=%22linear-gradient%22 x1=%2222.31%22 y1=%2223.62%22 x2=%223.73%22 y2=%223.05%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop offset=%220%22 stop-color=%22%23e93722%22/%3E%3Cstop offset=%221%22 stop-color=%22%23f86f25%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctitle%3EMagnifier%3C/title%3E%3Cpath fill=%22url(%23linear-gradient)%22 d=%22M23.33 20.1l-4.73-4.74a10.06 10.06.0 10-3.23 3.23l4.74 4.74a2.29 2.29.0 103.22-3.23zM5.85 14.26a5.94 5.94.0 118.42.0 6 6 0 01-8.42.0z%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:22px;background-position:15px 45%;font-size:calc(1em + .1vw);border-radius:11px;padding-top:1rem;padding-bottom:1rem;font-weight:700;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);transition:all .2s ease-in-out}@media all and (max-width:550px){.search .search-input{min-height:54px}}.search-button{width:0;height:0;padding:0}.enhanced .search-button{display:none}.search-input-wrapper{position:relative}.search-clear-button{background:0 0;border:none;position:absolute;right:0;top:50%;transition:opacity .2s ease-out;transform:translate(-25%,-50%);opacity:0;padding:.5em}.search-clear-button.enabled{opacity:1}.search-results{background:var(--THEME_COLOR,#d33a2c);color:#fff}.search-results img{border-radius:11px;border:4px solid #fff;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);transition:all .2s ease-in-out}.search-results img:hover{box-shadow:0 0 3px -1px rgba(50,50,93,.25),0 4px 12px -6px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025)}.search-results ol img{min-height:100px;height:auto}.logo{font-size:1em;line-height:0;width:3em;flex-basis:3em;flex-shrink:0;position:relative;z-index:0}@media all and (min-width:1450px){.logo{width:10.5em;flex-basis:10.5em}.logo img{transform:none}}.logo a{display:block;background:0 0;outline:0;padding:0;color:transparent;text-shadow:none}.logo a picture{display:block}.logo img{height:3.5em;transform:translate(0,15%)}.cart-active .back-to-top-wrapper{display:none}a.back-to-top{display:block;background:0 0;width:50px;height:50px;opacity:.7;text-shadow:none;border-radius:11px;padding:13px;transform-origin:bottom left;will-change:transform;transform:rotate(-11deg);transition:background-color .1s ease-out,transform .2s ease-out,opacity .1s ease-out;background-color:#666}@media all and (max-width:64em){a.back-to-top{opacity:.3}}a.back-to-top:focus,a.back-to-top:hover{background-color:#282634;opacity:1}a.back-to-top svg{display:block}.back-to-top-wrapper{width:50px;height:50px;display:none;position:fixed;bottom:20px;right:20px;z-index:9;will-change:transform;backface-visibility:hidden}.back-to-top-wrapper::before{display:block;content:"";height:90%;width:160%;position:absolute;background-image:url();background-size:100%;background-repeat:no-repeat;top:89%;left:-30%;right:0;transition:all .1s ease-out;transform-origin:30% 50%;pointer-events:none}@media(min-height:600px){.back-to-top-wrapper{display:block}}label{max-width:100%}.form__field__input,input[type=email],input[type=password],input[type=text],textarea{background:#effaff;font-size:1em;border:1px solid #d2dfe4;transition:box-shadow .3s ease-in-out,color .3s ease-in-out;background-position:right 1.35em center;background-size:.25em .25em;background-repeat:no-repeat;margin-bottom:5px;border-radius:11px;padding:.9em 2em .7em 1.1rem;display:block;width:100%;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.2)}.form__field__label{display:block;margin-bottom:.5em;cursor:pointer}input{border-color:#aaa}.partners ul{padding-left:0;text-align:center;list-style-image:none}.partners__native ul.bnnr-list li a{border-radius:11px;background-color:#fff;margin-bottom:3em;position:relative;top:0;padding:0;background-image:none;text-decoration-line:underline;text-decoration-color:#006fc6!important;text-decoration-thickness:1px;display:flex;flex-direction:column}.partners.partners-leaderboard ul li a,.partners.partners__lead ul li a,.partners__lead ul a,.partners__native ul.bnnr-list li a,.partners__native--smashing{box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,3%);transition:box-shadow .2s ease-in-out,top .1s ease-in-out;border-radius:11px}.partners.partners-leaderboard ul li a:hover,.partners.partners__lead ul li a:hover,.partners__native ul.bnnr-list li a:hover{box-shadow:0 1px 7px -5px rgba(50,50,93,.25),0 3px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,3%)}.partners.partners-leaderboard ul li a:active,.partners.partners-leaderboard ul li a:focus,.partners.partners__lead ul li a:active,.partners.partners__lead ul li a:focus,.partners__native ul.bnnr-list li a:active,.partners__native ul.bnnr-list li a:focus{box-shadow:inset 0 1px 7px -1px rgba(50,50,93,.25),inset 0 3px 6px -4px rgba(0,0,0,.3),inset 0 -6px 16px -6px rgba(0,0,0,3%);outline-offset:.75em;top:7px}.partners__native ul.bnnr-list li img{max-width:none;width:100%;height:auto;display:inherit}.partners.partners__lead a{box-shadow:none}.partners__lead ul a:active,.partners__lead ul a:focus{outline-offset:.75em;position:relative;top:7px;border-radius:11px}.partners__lead ul a:active img,.partners__lead ul a:focus img{border:2px solid #fff;box-shadow:0 1px 7px -1px rgba(50,50,93,.25),inset 0 3px 6px -4px rgba(0,0,0,.3),inset 0 -6px 16px -6px rgba(0,0,0,3%)}img::before{height:2.5em;display:block;top:2em;content:" ";width:100%;z-index:2;left:0}img::after{content:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221em%22 height=%221em%22 viewBox=%220 0 32 32%22 style=%22margin-right:10px%22%3E%3Cpath fill=%22%23777%22 d=%22M26 28H6v-4l6-10 8.219 10L26 20v8z%22/%3E%3Cpath fill=%22%23777%22 d=%22M26 15c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z%22/%3E%3Cpath fill=%22%23777%22 d=%22M28.681 7.159c-.694-.947-1.662-2.053-2.724-3.116s-2.169-2.03-3.116-2.724c-1.612-1.182-2.393-1.319-2.841-1.319H4.5c-1.378.0-2.5 1.121-2.5 2.5v27C2 30.878 3.122 32 4.5 32h23c1.378.0 2.5-1.122 2.5-2.5V10c0-.448-.137-1.23-1.319-2.841zM24.543 5.457c.959.959 1.712 1.825 2.268 2.543H22V3.189c.718.556 1.584 1.309 2.543 2.268zM28 29.5c0 .271-.229.5-.5.5h-23c-.271.0-.5-.229-.5-.5v-27c0-.271.229-.5.5-.5.0.0 15.499.0 15.5.0v7c0 .552.448 1 1 1h7v19.5z%22/%3E%3C/svg%3E")" " attr(alt);font-size:.9em;display:block;color:#666;line-height:1.5;position:absolute;font-style:italic;z-index:2;top:calc(2em - 35px);text-align:center;width:104%;left:-2%;padding:2.25em 1em;text-shadow:none;background-color:#eee;border-radius:11px}@media screen and (min-width:40em){.author__desc{margin-left:1em}}.author__desc{font-size:.8em;position:relative;font-style:normal!important;color:#333;padding:0!important}.author__desc p{margin:1em 0}.author__desc .show-more-link{display:inline}.author__desc__title{color:#666;text-transform:uppercase;letter-spacing:2px;font-size:.9em;margin:0;font-weight:400}@media(max-width:40em){.author__desc{width:100%}}.article{padding-top:calc(.5em + 2vw)}.article__summary{font-size:1.05em}.c-garfield-the-cat .article__summary{position:initial}.author__desc p{font-size:.95em}.wf-loaded-stage2 .author__desc p{font-size:1em}.article__summary{align-self:center;margin-top:0;color:#666;position:relative;padding-bottom:1.5em;margin-bottom:.5em;border-bottom:3px solid #e5e5e5;font-size:1.05em;line-height:1.55em;font-style:italic}.wf-loaded-stage2 .article__summary{font-size:1.15em}@media all and (max-width:420px){.article__content{margin-top:0}}.article__content{line-height:1.5;padding:0!important}.article__content a{color:#006fc6}.article__content .btn{color:#fff}.drop-caps+p::first-line{font-weight:700;font-variant:all-petite-caps;text-transform:lowercase;letter-spacing:.5px;font-size:1.15em}.drop-caps{width:calc(96px + 1vw);height:calc(120px + 4vw);float:left;margin-right:1.5em;position:relative;left:calc(-1.3em - .5vw);top:.5vw}@media all and (min-width:500px){.drop-caps{width:150px;height:186px;min-width:100px;margin-left:0}}@media screen and (min-width:64em){.author__desc{margin-left:0}}.drop-caps img{max-width:100%}.drop-caps img:nth-of-type(2){position:absolute;bottom:0;right:-40px;width:75%}@media all and (min-height:700px){body.articlepage{overflow:initial}}.form__field__label--extra{display:inline}@media(max-width:64em){.form__field__label--extra{display:none}}.article-header{margin:0}@media all and (max-width:1000px){.c-garfield-aside--meta{display:none}}@media all and (max-width:999px){.article-header--meta{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x;overflow-y:hidden}.article-header--meta::-webkit-scrollbar{display:none;width:0;background:0 0}.partners:not(.partners__lead):not(.partners-leaderboard):not(#sponsors-article-end):not(#partners-article-end):not(.partners__mobile){display:none}.partners__mobile{display:block}.meta-box{margin:1.5em 0}.comment-count{position:absolute;display:inline-block;height:0;width:0;line-height:0;overflow:hidden}.article-header--comments a{color:#d33a2c;text-decoration:none;font-weight:700}.article-header--meta .article-header--meta-comments{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 28.84 26.6%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23e93e32%7D%3C/style%3E%3C/defs%3E%3Ctitle%3EArtboard 29%3C/title%3E%3Cpath class=%22cls-1%22 d=%22M3.29 2.73a66.7 66.7.0 003.21 9.52l6.29 1.08-4.69 2.2c2.91 5.28 7 9.09 12.14 4.55L25 24.52l.57-.52-3.83-5.48c3.6-4.32 1.74-7.76-1.93-10.36L17 13.29l-.1-6.85A43.83 43.83.0 0011 4L9 7.7V3.39c-2.2-.65-4.07-1.08-5.08-1.3a.52.52.0 00-.63.64z%22/%3E%3C/svg%3E");background-size:auto .75em;background-repeat:no-repeat;background-position:0 45%;padding-left:1em}}.c-garfield-the-cat .article-header--meta{display:flex;align-items:flex-end;list-style:none;padding:0;margin:0 0 .95em;height:30px}.article-header--meta li{padding:0;margin:0;min-width:max-content}.article-header--meta li::before{display:none}.article-header--meta li::after{content:"/";font-size:1em;color:#a7a7a7;display:inline-block;margin:0 .25em}.article-header--meta li:last-of-type::after{display:none}.article-header--date{color:#585858;font-family:inherit;font-size:.95em}.article-header--comments{font-size:.9em}.article-header--updated{padding:0 .8rem;color:#137d54;background-color:#d6f3e7;border:1px solid #c6f2e0;border-radius:11px;font-weight:700;text-transform:initial;font-feature-settings:normal;font-variant:none;font-size:.9em;letter-spacing:0;min-width:fit-content;margin-right:7px}.meta-box{background:#f6f6f6;padding:.6em 1em;list-style:none;width:max-content;max-width:100%;border-radius:11px;font-size:.9em;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:.5em 2em}.c-garfield-the-cat .meta-box--item{line-height:1.4;padding-left:1.5em;background-size:auto 1em;background-repeat:no-repeat;background-position:0 2px;margin-bottom:0}.meta-box li:last-child,.meta-box--item:last-child{margin-bottom:0}.meta-box--tags{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.84 26.6'%3E%3Cpath fill='%23e93e32' class='cls-1' d='M12.78 22.74l1.35 1.35a2.09 2.09 0 003 0l8.12-8.15a2.09 2.09 0 000-3l-1.34-1.33zM14.71 2.51a2.09 2.09 0 00-1.52-.61l-10 .22L3 12.1a2.09 2.09 0 00.61 1.52l7.14 7.12L21.87 9.65zm-4.64 9.88a3.17 3.17 0 113.44-2.86 3.17 3.17 0 01-3.44 2.86z'/%3E%3C/svg%3E")}.meta-box--share{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 400%22%3E%3Cpath d=%22M126.16 359.66c148 0 228.93-122.61 228.93-228.94.0-3.48.0-6.94-.23-10.4A163.83 163.83.0 00395 78.68a160.93 160.93.0 01-46.21 12.66 80.82 80.82.0 0035.37-44.51 161.17 161.17.0 01-51.09 19.53A80.54 80.54.0 00196 139.74 228.42 228.42.0 0130.13 55.68 80.52 80.52.0 0055 163.09 80 80 0 0118.52 153v1a80.49 80.49.0 0064.55 78.87 80.37 80.37.0 01-36.33 1.38 80.55 80.55.0 0075.17 55.87A161.38 161.38.0 0122 324.67a163.54 163.54.0 01-19.16-1.16 227.73 227.73.0 00123.33 36.08%22 fill=%22%231da1f2%22/%3E%3C/svg%3E")}.meta-box--published{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.84 26.6'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23e93e32%7D%3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='8.25' y='2.31' width='3.06' height='3.66' rx='1.03' ry='1.03'/%3E%3Crect class='cls-1' x='17.53' y='2.31' width='3.06' height='3.66' rx='1.03' ry='1.03'/%3E%3Cpath class='cls-1' d='M24.1 5.39h-2.56a2 2 0 01-2 1.59h-1a2 2 0 01-2-1.59h-4.28a2 2 0 01-2 1.59h-1a2 2 0 01-2-1.59H4.75a2.07 2.07 0 00-2.08 2.07v14.75a2.07 2.07 0 002.07 2.07H24.1a2.07 2.07 0 002.07-2.07V7.46a2.07 2.07 0 00-2.07-2.07zm-.29 16.15H5.23V8.45h18.58z'/%3E%3Cpath class='cls-1' d='M7.18 11.71h2.5v2.5h-2.5zM11.27 11.71h2.5v2.5h-2.5zM15.26 11.71h2.5v2.5h-2.5zM19.35 11.71h2.5v2.5h-2.5zM7.18 15.78h2.5v2.5h-2.5zM11.27 15.78h2.5v2.5h-2.5zM15.26 15.78h2.5v2.5h-2.5zM19.35 15.78h2.5v2.5h-2.5z'/%3E%3C/svg%3E")}.meta-box--author{background-image:url(/images/icons/author.svg)}code,pre{font-feature-settings:normal;color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Fira Code,Menlo,Consolas,Monaco,andale mono,ubuntu mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;font-variant-ligatures:none;word-wrap:normal;tab-size:4;hyphens:none}pre{padding:1rem;margin:.5rem 0;resize:both;max-width:100vw;color:#666;background:#fafafa;border:1px solid #eee;font-size:1em;border-radius:11px;min-width:250px;overflow:auto;box-shadow:0 6px 12px -17px rgba(50,50,93,.25),0 7px 6px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,3%)}.code-toolbar{position:relative}li>.code-toolbar{margin-top:1em}.code-toolbar>.toolbar{position:absolute;top:.5em;right:.5em;opacity:0;transition:opacity .3s ease-in-out}.code-toolbar>.toolbar .toolbar-item{display:inline-block}code.diff-highlight{width:100%}a code{background:0;padding:0;text-decoration-line:underline}:not(pre)>code,code{background:#fff2ea;color:#333;font-size:calc(.75em + .1vw);line-height:calc(1.5em + .2vw);padding:0 .2725em;font-style:normal;display:inline-block}:not(pre)>code{white-space:normal}pre>code{line-height:calc(1.75rem + .2vw);background:0 0;white-space:break-spaces}pre[data-line]>code{white-space:pre}pre[data-line]>code>span{height:calc(1.75rem + .2vw);display:inline-block}.table,table{width:100%;border-collapse:collapse;margin-bottom:calc(2em + 2vw);clear:both}.tr,tr{border-bottom:4px solid #eee}.td,.th,td,th{padding:1em 1.5em;border:none;text-align:left}.scroll-pane{overflow-x:auto;scrollbar-color:#666 #201c29;-webkit-overflow-scrolling:touch}.scroll-pane::-webkit-scrollbar{height:.75em}.scroll-pane::-webkit-scrollbar-thumb{background:#b0b0b0;border-radius:11px}.scroll-pane table td{min-width:30vw}@media all and (min-width:650px){.scroll-pane table td{min-width:auto}}.layout-fixed{table-layout:fixed}.figure table{margin-bottom:0}.tablesaw td{line-height:165%;text-align:left;vertical-align:middle}.tablesaw td,.tablesaw th{padding:.8em 1em}tbody tr:nth-child(2n) td{background-color:#f7f7f7}.tablesaw th,table th{border-bottom:4px solid #ddd}@media screen and (max-width:767px){.tablesaw thead{display:none}.tablesaw tr{display:flex;flex-direction:column;margin-bottom:1.5em;width:100%;border-radius:11px;border:1px solid #eee}.tablesaw td:before{content:attr(data-label);display:table-cell;font-weight:700;padding:0 1em 0 0;text-align:right}.tablesaw td:last-child:after{content:"";position:absolute;left:0;right:0;bottom:0}}a.skip-main{left:-999px;position:absolute;top:auto;width:1px;height:1px;overflow:hidden;z-index:-999}a.skip-main:active,a.skip-main:focus{color:#d33a2c;background-color:#fff;left:auto;top:auto;width:auto;height:auto;overflow:auto;padding:.5em 1em;text-align:center;font-size:1.2em;z-index:999}lite-youtube{background-color:#000;position:relative;display:block;contain:content;background-position:50%;background-size:cover;cursor:pointer;max-width:720px}lite-youtube::before{content:"";display:block;position:absolute;top:0;background-image:url();background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0,0,.2,1)}lite-youtube::after{content:"";display:block;padding-bottom:56.25%}lite-youtube>iframe{width:100%;height:100%;position:absolute;top:0;left:0;border:0}lite-youtube>.lty-playbtn{display:block;width:68px;height:48px;position:absolute;cursor:pointer;transform:translate3d(-50%,-50%,0);top:50%;left:50%;z-index:1;background-color:transparent;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');filter:grayscale(100%);transition:filter .1s cubic-bezier(0,0,.2,1);border:none}lite-youtube .lty-playbtn:focus,lite-youtube:hover>.lty-playbtn{filter:none}lite-youtube.lyt-activated{cursor:unset}lite-youtube.lyt-activated::before,lite-youtube.lyt-activated>.lty-playbtn{opacity:0;pointer-events:none}.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.video-embed-container .video-embed-container--wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.signature{margin:1.5em 0;font-size:.9em;color:silver;font-style:italic}.author .show-more-link{font-size:.9em;display:inline;color:#666;text-decoration-line:underline;text-decoration-color:initial;font-weight:400}.cookie-banner{background-color:#fff;border-radius:11px;position:fixed;width:calc(19em + 1vw);padding:1em 1.5em;font-size:1em;z-index:99;box-shadow:0 6px 40px rgba(0,0,0,.3);bottom:1.25em;right:1.25em}.cookie-banner p{font-size:.9em;margin-top:0}.cookie-banner__container{display:flex}.cookie-banner button{padding:.9em 1em}@media screen and (max-width:480px){.cookie-banner{right:0;left:0;width:100%;border-radius:0;bottom:0}.cookie-banner p{margin-top:1em}}@media screen and (max-width:380px){.cookie-banner p{margin-top:0}}.cookies--btn{width:100%}.mr5{margin-right:.5em}.mr0{margin-right:0!important}.btn--white{background:#fff;color:#267dcc;border:1px solid #fff}.btn--white--bordered{border:1px solid #ddd}.partners ul li{display:inline-block;margin-bottom:3em;font-size:.85em;padding:0;text-align:center;vertical-align:top;max-width:25rem;border-radius:11px;border:1px solid #eee;min-height:90px}.c-friskies-box--ad.partners li{width:auto}.partners__native ul.bnnr-list li{border:0;width:100%;height:auto;max-width:85%;margin:0 0 2em auto}.partners__native ul.bnnr-list .ad__desc{padding:1em}.partners__native ul.bnnr-list li:only-child{padding-bottom:0}blockquote:not(.pull-quote){font-style:italic;border-left:11px solid #e6e4e1;padding:1em calc(1.5em + .5vw);color:#424242;margin-left:0;margin-right:0;font-size:1.05em;line-height:1.65em;letter-spacing:0;border-radius:11px;background:linear-gradient(to bottom right,rgba(245,242,240,.8901960784) 0,#fff 100%)}blockquote:not(.pull-quote) p{margin:0}.btn--small.toolbar-item,.btn.btn--small{font-size:.9em;border-radius:6px;margin:0;padding:.4em 1em}.c-felix-the-cat a.btn{display:table;margin-top:1em;margin-bottom:1.5em}@media screen and (max-height:880px){.article__comments--notes{display:none}.article__comments__form__desc{margin-top:4em}}header.subnav__header{background-color:#fff;background-color:var(--headers-bg-color,#fff);padding:.2rem 0 0;z-index:1}.subnav__primary::-webkit-scrollbar{display:none;width:0;background:0 0}.subnav__tags li:first-child{padding-left:14px}.subnav__tags li:last-child{padding-right:.8em}.subnav__tags .subnav-item{margin-bottom:0}@media(min-width:740px){header.subnav__header{padding:.25rem 0 0;box-shadow:0 4px 20px rgba(0,0,0,.12)}.subnav__tags li:first-child{padding-left:35px}}.subnav .nav-item-link{color:#d33a2c;text-shadow:none!important;font-weight:700;font-family:Mija;text-decoration-skip-ink:auto;text-decoration-thickness:1px;text-underline-offset:1px;border-radius:11px;font-size:1rem;background-color:#ffe7e7;transition:.2s border ease-in-out,.2s box-shadow ease-in-out;border:1px solid #fee0e0}.subnav .nav-item-link:hover{text-shadow:none;font-weight:700;font-family:Mija;border-radius:11px;background-color:#ffe3e3;border:1px solid #faa4a4}.subnav-item a:active,.subnav-item a:active:hover,.subnav-item a:focus,.subnav-item a:focus:hover{box-shadow:inset 0 1px 3px rgba(0,0,0,.12);background-color:#d33a2c;color:#fff!important;outline:0}.subnav-item--active a.nav-item-link,.subnav-item--active a.nav-item-link:hover{background-color:#d33a2c;color:#fff!important;border:1px solid #d33a2c}.subnav-item{display:flex;margin-right:9px;padding-left:3px}.subnav-item .nav-item-link{padding:2px 12px}.subnav a{background:0 0;font-weight:700;display:flex;align-items:center;text-decoration:none}.subnav__primary{padding:.25em 0;margin-top:.25em;margin-bottom:.35em;display:flex;position:relative;scroll-snap-type:x;scroll-padding:1rem;overflow-x:auto;scrollbar-width:none}.subnav-more-item__button{padding:.2em 1em;color:#d33a2c;border:1px solid #ddd;border-radius:11px;background:0 0;display:flex;align-items:center;justify-content:space-around;position:relative;font-size:.85em;min-width:max-content;transition:none}.hidden{display:none!important}.c-garfield-the-cat .subnav-item--green .nav-item-link{color:#137d54!important;background-color:#d6f3e7;transition:.2s border ease-in-out,.2s box-shadow ease-in-out;border:1px solid #c6f2e0}.c-garfield-the-cat .subnav-item--green .nav-item-link:hover{color:#137d54!important;background-color:#c8f1e0;border:1px solid #a0dcc4}.subnav .nav-item-link:hover{color:#d33a2c;text-shadow:none;font-weight:700;border-radius:11px;background-color:#ffe3e3;border:1px solid #faa4a4}.feature-panel__desc,.partners__desc{font-size:.75em;color:#666;padding-bottom:10px;top:-2em;position:relative}.feature-panel{position:relative;border-radius:11px;padding:2em;display:flex;flex-wrap:wrap;background-color:#f6f6f6;background:radial-gradient(128.42% 48.36% at 72.89% 25.8%,rgba(200,221,218,0) 0,rgba(200,221,218,.4) 100%);box-shadow:0 4px rgba(191,222,218,.75)}@media(min-width:1000px){.feature-panel{padding:1.75em 2em}}.feature-panel-left-col,.feature-panel-right-col{flex-basis:100%;position:relative;padding:0;flex-shrink:0}.feature-panel-left-col h3{margin-top:0}.feature-panel-right-col{order:-1;display:flex;align-items:flex-start;margin-bottom:1em;justify-content:center;align-items:center;margin-top:2em}@media(min-width:800px){.feature-panel-left-col{flex-basis:65%}.feature-panel-right-col{order:0;flex-basis:35%;margin:0;justify-content:center}}.feature-panel-description>:first-child{margin-top:0}.feature-panel-description>:last-child{margin-bottom:0}.feature-panel-image-link{position:relative;text-decoration:none;width:100%;max-width:210px;transition:scale,opacity .2s ease-out;padding-left:2.5em;background-image:none}.feature-panel-image{width:100%;max-width:14.375rem;margin:0 auto;display:block;transition:all .2s ease-out;will-change:transform;transform-origin:0 100%;transform:rotate(-11deg)}@media(min-width:1000px){.feature-panel-image-link{position:absolute;max-width:14.375rem;top:-90px;right:0}}.feature-panel-image-img{height:auto}.btn--large.toolbar-item,.btn.btn--large{font-size:calc(1em + .25vw);padding:.75em 1em}.btn .sr-only,.sr-only{position:absolute;display:inline-block;height:0;width:0;line-height:0;overflow:hidden}.c-garfield__nl{display:none}@media all and (min-width:1000px){.drop-caps{display:none}.l-author-bio{display:flex}.c-garfield__nl{display:block}.nl-box__form{display:flex;padding-bottom:7px;text-align:center;letter-spacing:-.5px;color:#fff;font-size:1.15em}.nl-box__desc{margin-top:10px;color:#666;font-size:80%;line-height:1.5em;text-align:center}.nl-box__form .nl-box__form--button,.nl-box__form .nl-box__form--email{flex-grow:1;flex-shrink:0;box-sizing:border-box;width:auto;margin:0;padding:.75em 1em;border:0;border-radius:11px;background:#fff;font-size:.95em}.nl-box__form--button:active,.nl-box__form--button:focus,input.nl-box__form--email:active,input.nl-box__form--email:focus{box-shadow:0 1px 1px rgba(0,0,0,.3)}.nl-box__form--button:-ms-input-placeholder,.nl-box__form--email:-ms-input-placeholder{color:#777;font-style:italic}.nl-box__form--button::placeholder,.nl-box__form--email::placeholder{color:#777;font-style:italic}.nl-box__form .nl-box__form--button{transition:all .2s ease-in-out;color:#fff;background-color:#0168b8;font-family:Mija,-apple-system,Arial,BlinkMacSystemFont,roboto slab,droid serif,segoe ui,Ubuntu,Cantarell,Georgia,serif;font-weight:700;box-shadow:0 1px 1px rgba(0,0,0,.3);width:100%;border:0;border-left:1px solid #ddd;flex:2;border-top-left-radius:0;border-bottom-left-radius:0}.nl-box__form .nl-box__form--email{border-top-right-radius:0;border-bottom-right-radius:0;width:100%;flex:4}.nl-box__form .nl-box__form--button:active,.nl-box__form .nl-box__form--button:focus,.nl-box__form .nl-box__form--button:hover{cursor:pointer;color:#fff;background-color:#0168b8;border-color:#dadada;box-shadow:0 1px 1px rgba(0,0,0,.3)}.nl-box__form .nl-box__form--button:active,.nl-box__form .nl-box__form--button:focus{outline:0!important;text-shadow:1px 1px 1px rgba(0,0,0,.3);box-shadow:inset 0 3px 3px rgba(0,0,0,.3)}.nl-box__group{display:flex;box-shadow:0 13px 27px -5px rgba(50,50,93,.25),0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);border-radius:11px}.nl-box__wrapper{display:flex;flex-direction:column;justify-content:center}.nl-box__form form{width:100%}.nl-box__form .nl-box__group{margin:0}.nl-box{margin:1.5em 0;padding:1em 0;box-shadow:none;max-width:750px;justify-self:center}}.article__content a.anchor{color:#767676;text-decoration:none;transition:color .2s ease-in-out;padding:.35em .05em}.article__content a.anchor:active,.article__content a.anchor:focus,.article__content a.anchor:hover{color:#106fc6;background-image:linear-gradient(90deg,#006fc6 0,#2ca2d3 30%,#006fc6 85%,#006fc6 100%);background-size:100%;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent;text-decoration:none}#promo-article-end,#sponsors-article-end,.article__comments,.main-footer{content-visibility:auto}.toc-components{box-shadow:0 9px 30px -5px rgba(50,50,83,.25),0 8px 8px -12px rgba(0,0,0,.2),0 -6px 16px -6px rgba(0,0,0,3%);border-radius:11px;padding:2em;background-color:#fff;margin:1.25em 0 3em;grid-column:3/13}@media screen and (min-width:500px){.toc-components{display:grid;grid-template-columns:1fr 1fr}}@media screen and (min-width:800px){.toc-components{padding:2em 3em}}.article__content .btn--white{background:#fff;color:#267dcc}</style><link rel="preload" href="/js/nav-v2.js" as="script" fetchpriority="high"><link rel="preload" href="/fonts/MijaBold/Mija_Bold-webfont-subset-v2.woff2" as="font" type="font/woff2" crossorigin="" fetchpriority="high" media="(prefers-reduced-data: no-preference)"><link rel="preload" href="/fonts/ElenaWebRegular/ElenaWebRegular-subset-v2.woff2" as="font" crossorigin="" fetchpriority="high" media="(prefers-reduced-data: no-preference)"><link rel="preload" href="/fonts/ElenaWebBold/ElenaWebBold-subset-v2.woff2" as="font" type="font/woff2" media="(min-width: 800px)" crossorigin="" fetchpriority="high"><link rel="preload" href="/fonts/ElenaWebRegularItalic/ElenaWebRegularItalic-subset-v2.woff2" as="font" media="(min-width: 800px)" type="font/woff2" crossorigin="" fetchpriority="low"><link rel="alternate" type="application/rss+xml" title="Smashing Magazine &amp;raquo; Feed" href="https://www.smashingmagazine.com/feed/"><meta name="description" content="React Server Components (RSCs) combine the best of client-side rendering, and author Lazar Nikolov thoroughly examines how we got here with a deep look at the impact that RSCs have on the page load timeline."><meta name="robots" content="noodp"><link rel="canonical" href="https://www.smashingmagazine.com/2024/05/forensics-react-server-components/"><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="og:title" content="The Forensics Of React Server Components (RSCs) — Smashing Magazine"><meta property="og:description" content="React Server Components (RSCs) combine the best of client-side rendering, and author Lazar Nikolov thoroughly examines how we got here with a deep look at the impact that RSCs have on the page load timeline."><meta property="og:url" content="https://www.smashingmagazine.com/2024/05/forensics-react-server-components/"><meta property="og:site_name" content="Smashing Magazine"><meta property="article:publisher" content="https://www.facebook.com/smashmag"><meta property="article:author" content="https://www.smashingmagazine.com/author/lazar-nikolov/"><meta property="article:tag" content="React"><meta property="article:tag" content="JavaScript"><meta property="article:tag" content="Coding"><meta property="article:tag" content="Performance"><meta property="article:section" content="General"><meta property="article:published_time" content="2024-05-09 13:00:00 +0000 UTC"><meta property="article:modified_time" content=" 2024-05-09 13:00:00 +0000 UTC"><meta property="og:updated_time" content="2024-05-09 13:00:00 +0000 UTC"><meta property="og:image" content="https://files.smashing.media/articles/forensics-react-server-components/forensics-of-react-server-components.jpg"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="React Server Components (RSCs) combine the best of client-side rendering, and author Lazar Nikolov thoroughly examines how we got here with a deep look at the impact that RSCs have on the page load timeline."><meta name="twitter:title" content="The Forensics Of React Server Components (RSCs) — Smashing Magazine"><meta name="twitter:site" content="@smashingmag"><meta name="twitter:image" content="https://files.smashing.media/articles/forensics-react-server-components/forensics-of-react-server-components.jpg"><meta name="twitter:creator" content="@nikolovlazar"><meta property="DC.date.issued" content="2024-05-09 13:00:00 +0000 UTC"><meta name="theme-color" content="#d33a2c"><meta property="fb:pages" content="45576747489"><meta name="google-site-verification" content="X5sd8PEDJqYLSR98RKgSozn-0RNpknXFlGoA-UXe5K0"><meta name="p:domain_verify" content="40d67b22ec16f115be9bb71c7405d527"><link rel="icon" href="/images/favicon/favicon.ico"><link rel="icon" href="/images/favicon/favicon.svg" type="image/svg+xml"><link rel="apple-touch-icon" href="/images/favicon/apple-touch-icon.png"><link rel="manifest" href="/manifest.json"><link rel="prefetch" as="script" href="/js/Amnesia.e126ed35dbe63a731d09.js"><link rel="prefetch" as="script" href="/js/vendors-node_modules_canvas-confetti_dist_confetti_module_mjs-node_modules_lodash_intersectio-787930.3b5e3a2f06b01b54b787.js"><link rel="prefetch" as="script" href="/js/js_components_Confetti_js-js_components_CreditCardForm_js-js_forms_Autocomplete_js-js_forms_C-23693c.9376e95b491aa102da37.js"><link rel="prefetch" as="script" href="/js/Checkout.b325c4d16c1688058f32.js"><link rel="prefetch" as="script" href="/js/DeliveryTimeTable.d75c853ebdd688b350d6.js"><link rel="prefetch" as="script" href="/js/EditButton.f1625b8f5cd6b0d448bf.js"><link rel="prefetch" as="script" href="/js/FeaturePanel.16f8089744d24d55a879.js"><link rel="prefetch" as="script" href="/js/HTMLOverlay.a61624a2067d80f5f465.js"><link rel="prefetch" as="script" href="/js/InsertQueryParam.002a06fb5089df6b0ca4.js"><link rel="prefetch" as="script" href="/js/JobPostForm.97a1e167104dfd828730.js"><link rel="prefetch" as="script" href="/js/LastOrders.53ac28c9ac746db29eb7.js"><link rel="prefetch" as="script" href="/js/Login.d232b31ed02295fc78a2.js"><link rel="prefetch" as="script" href="/js/MemberAccountDetails.c718f8285a2688a45adf.js"><link rel="prefetch" as="script" href="/js/MemberCount.8cf23757789b93a24739.js"><link rel="prefetch" as="script" href="/js/MemberDownloads.cc410fbf5c78b662d01c.js"><link rel="prefetch" as="script" href="/js/MemberHeader.69ef938f4aa5dd876f17.js"><link rel="prefetch" as="script" href="/js/js_components_OrderItem_js-js_selectors_index_js.24587b7e9ff1020f43ac.js"><link rel="prefetch" as="script" href="/js/MemberOrders.03e4a26cdf3d1a9875d3.js"><link rel="prefetch" as="script" href="/js/MemberPaymentDetails.06a394144892c004a489.js"><link rel="prefetch" as="script" href="/js/MemberRecoverPassword.90df5c13995e3356cde3.js"><link rel="prefetch" as="script" href="/js/vendors-node_modules_lodash_throttle_js-node_modules_react-google-recaptcha_lib_esm_index_js.9edd47ad687032da4ee4.js"><link rel="prefetch" as="script" href="/js/MemberSubscriptionCheckout.6e7c2ed49162fe375e88.js"><link rel="prefetch" as="script" href="/js/MembershipDashboard.e22da53db050bea27cb7.js"><link rel="prefetch" as="script" href="/js/MembershipPlan.69f86cc1646e028b97d2.js"><link rel="prefetch" as="script" href="/js/MembershipSlider.c1dba9aedca7fa8c8197.js"><link rel="prefetch" as="script" href="/js/Order.a1fa45b36259505d5bd1.js"><link rel="prefetch" as="script" href="/js/PriceTag.d47ecf5fa153ceeb301b.js"><link rel="prefetch" as="script" href="/js/PriceTeaser.52c518d073c422204496.js"><link rel="prefetch" as="script" href="/js/SearchHitsCount.02eba00fd8afc5c69aa6.js"><link rel="prefetch" as="script" href="/js/SearchTitle.4812ef7e7ed653c1ab1a.js"><link rel="prefetch" as="script" href="/js/Signup.8fc67b86cd9076ce423d.js"><link rel="prefetch" as="script" href="/js/TOC.fb36f77d144b29d92b93.js"><link rel="prefetch" as="script" href="/js/TokenVerification.55dbbcb8c7b93a6aa7fb.js"><link rel="prefetch" as="script" href="/js/Accordion.eee5c2d6d16474912eff.js"><link rel="prefetch" as="script" href="/js/AddLoginRedirect.1908d64884619c425fa6.js"><link rel="prefetch" as="script" href="/js/AddTimeAgo.c69adde9d6dd3a91f9ad.js"><link rel="prefetch" as="script" href="/js/AddToCart.bbbf279d4f24eeaa3d87.js"><link rel="prefetch" as="script" href="/js/AttachJobFilters.0998e60cf3daaee60c4c.js"><link rel="prefetch" as="script" href="/js/ContentTabs.3fbf73f013e2b8d366aa.js"><link rel="prefetch" as="script" href="/js/ContrastSwitcher.23684a35d3e9776bf4dd.js"><link rel="prefetch" as="script" href="/js/InstantAddToCart.13cbf00c4f4c7d14e50e.js"><link rel="prefetch" as="script" href="/js/JobsFilters.0927e6361a79a832bf12.js"><link rel="prefetch" as="script" href="/js/ListControls.f6422b73ff0916f22091.js"><link rel="prefetch" as="script" href="/js/MembershipPlans.c2ca5089c4ffd1452c55.js"><link rel="prefetch" as="script" href="/js/vendors-node_modules_lodash_intersection_js-node_modules_lodash_sample_js-node_modules_lodash-dcaf6a.fc5df22f22820c2f9e9d.js"><link rel="prefetch" as="script" href="/js/PostLoad.4d98e0fc61e01886a249.js"><link rel="prefetch" as="script" href="/js/PreLoad.92ba1d75b017143a8fd2.js"><link rel="prefetch" as="script" href="/js/Search.52bdf6fc3555cfbb0956.js"><link rel="prefetch" as="script" href="/js/ShowIfAdBlock.f6eaa1349b1f8b54b707.js"><link rel="prefetch" as="script" href="/js/ToggleVisibility.a052e3652d9f2cd6e03a.js"><link rel="prefetch" as="script" href="/js/Tooltip.3720c9ed3ad11cbeacbe.js"><style type="text/css"></style><script type="text/javascript" src="/js/prism.js"></script><script src="/js/clipboard.min.js"></script></head><body data-instant-whitelist="" class="no-ads no-panels articlepage enhanced js anonymous non-subscriber"><div data-handler="PreLoad" id="top"><span></span></div><a href="#main-heading" class="skip-main">Skip to main content</a>
<a href="#article__start" class="skip-main">Start reading the article</a>
<a href="/articles/" class="skip-main">Jump to list of all articles</a>
<a href="#topics" class="skip-main">Jump to all topics</a><header class="global-header header"><div class="logo"><a href="/" title="← Back to the homepage"><picture><source media="(max-width: 1450px)" srcset="/images/logo.svg"><source media="(min-width: 1450px)" srcset="/images/logo--full.svg"><img src="/images/logo/logo.svg" loading="eager" decoding="async" alt="Smashing Magazine"></picture></a></div><nav class="main-nav"><ul class="main-nav__primary"><li class="nav-item nav-item-1 nav-item--active"><a data-instant="" class="nav-item-link" href="/articles/">Articles</a></li><li class="nav-item nav-item-2"><a data-instant="" class="nav-item-link" href="/printed-books/">Books</a></li><li class="nav-item nav-item-3"><a data-instant="" class="nav-item-link" href="/online-workshops/">Workshops</a></li><li class="nav-item nav-item-4"><a data-instant="" class="nav-item-link" href="/events/">Conferences</a></li><li class="nav-item nav-item-5"><a data-instant="" class="nav-item-link" href="/membership/">Membership</a></li><li class="nav-item nav-item-6"><a data-instant="" class="nav-item-link" href="/jobs/">Job Board</a></li><li class="nav-item nav-item-7"><a data-instant="" class="nav-item-link" href="/the-smashing-newsletter/">Newsletter</a></li><li class="nav-item nav-item-8"><a class="nav-item-link" href="https://podcast.smashingmagazine.com">Podcasts</a></li><li class="nav-item nav-item-9"><a class="nav-item-link" href="/write-for-us/">Write for us</a></li><li class="nav-item nav-item-10"><a class="nav-item-link" href="mailto:advertising@smashingmagazine.com">Advertise with us</a></li><li role="none" class="nav-item main-nav-more-item"><button class="main-nav-more-item__button" type="button" aria-haspopup="true" aria-expanded="false">
<span class="menu-text--lg">More</span>
<span class="menu-text--lg--close">Less</span>
<span class="menu-text--sm">Menu</span>
<span class="menu-text--sm--close">Less</span></button></li></ul></nav><nav class="secondary-nav"><ul class="main-nav__secondary"><li class="nav-item nav-item-1 nav-item--active"><a data-instant="" class="nav-item-link" href="/articles/" tabindex="-1">Articles</a></li><li class="nav-item nav-item-2"><a data-instant="" class="nav-item-link" href="/printed-books/" tabindex="-1">Books</a></li><li class="nav-item nav-item-3"><a data-instant="" class="nav-item-link" href="/online-workshops/" tabindex="-1">Workshops</a></li><li class="nav-item nav-item-4"><a data-instant="" class="nav-item-link" href="/events/" tabindex="-1">Conferences</a></li><li class="nav-item nav-item-5"><a data-instant="" class="nav-item-link" href="/membership/" tabindex="-1">Membership</a></li><li class="nav-item nav-item-6"><a data-instant="" class="nav-item-link" href="/jobs/" tabindex="-1">Job Board</a></li><li class="nav-item nav-item-7"><a data-instant="" class="nav-item-link" href="/the-smashing-newsletter/" tabindex="-1">Newsletter</a></li><li class="nav-item nav-item-8"><a class="nav-item-link" href="https://podcast.smashingmagazine.com" tabindex="-1">Podcasts</a></li><li class="nav-item nav-item-9"><a class="nav-item-link" href="/write-for-us/" tabindex="-1">Write for us</a></li><li class="nav-item nav-item-10"><a class="nav-item-link" href="mailto:advertising@smashingmagazine.com" tabindex="-1">Advertise with us</a></li></ul></nav><div class="search"><form data-handler="Search" id="js-search-form" class="search-form" method="get" action="https://www.google.com/webhp?q=site:smashingmagazine.com"><div class="search-input-wrapper"><input class="input search-input" inputmode="search" type="search" name="q" id="js-search-input" autocomplete="off" placeholder="Search articles..." aria-label="Search articles">
<input type="hidden" name="sitesearch" value="smashingmagazine.com">
<a id="js-search-clear-button" class="search-clear-button" tabindex="-1" role="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.35 15.36" width="16" height="16" tabind="-1"><title>Clear Search</title><path fill="#e33b2a" d="M8.38 11.41c-.5-.5-.78-.52-1.33.0L4 14.49c-1.18 1.18-1.7 1.18-3-.16s-1.18-2-.18-3L4 8.14A.69.69.0 003.93 7l-3-3c-1-1-1.13-1.81.0-3s1.9-1.21 3.13.0L7 4a.66.66.0 001.11.0c.63-.65 2.49-2.51 3.28-3.35a1.46 1.46.0 012.3-.15c.24.24.47.42.89.84.86.86.94 1.57.05 2.46l-3.27 3.26c-.36.34-.52.58-.16.94l3.27 3.27c1.1 1.1 1.23 1.7.05 2.88l-.58.58a1.59 1.59.0 01-2.46-.21z"></path></svg></a></div><input type="submit" class="search-button btn" name="submit" value="Search" id="js-search-submit"><span></span></form></div></header><script src="/js/nav-v2.js" fetchpriority="high" defer=""></script><div><div data-component="SearchResults" class="search-results" data-lite="true"><div></div></div></div><header class="subnav__header" id="all-topics"><nav class="subnav" role="navigation"><ul class="subnav__primary subnav__tags flex"><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/accessibility/">Accessibility</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/ux/">UX</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/css/">CSS</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/javascript/">JavaScript</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/performance/">Performance</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/design/">Design</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/figma/">Figma</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/wallpapers/">Wallpapers</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/react/">React</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/vue/">Vue</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/round-ups/">Round-Ups</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/web-design/">Web Design</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/guides/">Guides</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/business/">Business</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/career/">Career</a></li><li class="subnav-item"><a data-instant="" class="nav-item-link" href="/category/privacy/">Privacy</a></li><li role="none" class="subnav-item subnav-more-item"><a class="subnav-more-item__button" href="/articles/"><span class="menu-text">Jump to all articles ↬</span></a></li></ul></nav></header><main id="main"><script id="gotell" type="application/json">{"created_at":"2024-05-09T13:00:00Z"}</script><article class="block article" role="main"><div class="container article-container"><div class="row"><div class="col-12 article__content" id="article__content"><div class="c-garfield-the-cat"><div class="c-garfield-header"><header class="article-header"><ul class="article-header--meta"><li class="article-header--meta-item article-header--meta-item__author"><a class="author-post__author-title" href="/author/lazar-nikolov/">Lazar Nikolov</a></li><li class="article-header--meta-item article-header--meta-item__date"><time class="article-header--date" datetime="2024-05-09">May 9, 2024</time></li><li class="article-header--meta-item article-header--meta-comments"><span class="article-header--comments"><a href="#comments-forensics-react-server-components"><span data-component="CommentsCount" data-insert="true" data-thread="/2024/05/forensics-react-server-components/" data-article="articles/2024-05-09-forensics-react-server-components.md"><span><span class="small-caps">4</span> <span class="comment-count">comments</span></span></span></a></span></li></ul><h1 id="main-heading" class="article-header--title">The Forensics Of React Server Components (RSCs)</h1></header></div><ul class="meta-box meta-box--article"><li class="meta-box--item meta-box--published">24 min read</li><li class="meta-box--item meta-box--tags"><a href="/category/react">React</a>,
<a href="/category/javascript">JavaScript</a>,
<a href="/category/coding">Coding</a>,
<a href="/category/performance">Performance</a></li><li class="meta-box--item meta-box--share">Share on <a rel="nofollow" href="https://TwItTeR.CoM/intent/tweet?text=The%20Forensics%20Of%20React%20Server%20Components%20%28RSCs%29&amp;url=https%3A%2F%2Fwww.smashingmagazine.com%2f2024%2f05%2fforensics-react-server-components%2f&amp;via=smashingmag">Twitter</a>,&nbsp;<a rel="nofollow" href="https://data.smashing.services/ball?uri=//www.linkedin.com/shareArticle?url=https://www.smashingmagazine.com%2f2024%2f05%2fforensics-react-server-components%2f&amp;title=The%20Forensics%20Of%20React%20Server%20Components%20%28RSCs%29">LinkedIn</a></li></ul><div class="c-garfield-aside--meta"><div class="l-author-bio"><div class="mobw-40 mobh-40 w-48 h-48 rounded-3xl bio-image__large mb-5 mr-3"><figure role="presentation" class="bio-image"><a href="/author/lazar-nikolov/" class="bio-image-link"><div class="bio-image-wrapper"><picture><source width="100" height="100" type="image/avif" srcset=""><img class="bio-image-image" src="https://files.smashing.media/authors/lazar-nikolov.jpeg" loading="eager" decoding="async" fetchpriority="high" width="100" height="100" alt="Lazar Nikolov"></picture></div></a></figure></div><div class="l-author-bio-content author__desc" id="author__desc"><h4 class="author__desc__title">About The Author</h4><p>Lazar Nikolov is a Web Performance Developer Advocate at <a href="https://sentry.io/">sentry.io</a> and instructor at egghead (<a href="https://twitter.com/eggheadio">@eggheadio</a>). He is running <a href="https://creatures.dev">creatures.dev</a>, a community of curious …
<a href="/author/lazar-nikolov/" class="show-more-link">More about
Lazar&nbsp;↬</a></p></div></div><div class="c-garfield__nl"><h4 class="h2">Email Newsletter</h4><section class="nl-box__form"><form action="//smashingmagazine.us1.list-manage.com/subscribe/post?u=16b832d9ad4b28edf261f34df&amp;id=a1666656e0" method="post"><div class="nl-box__wrapper"><label for="mce-EMAIL-hp" class="sr-only">Your (smashing) email</label><div class="nl-box__group"><input type="email" name="EMAIL" class="nl-box__form--email" id="mce-EMAIL-hp" placeholder="Your email">
<input type="submit" value="Meow!" name="subscribe" class="nl-box__form--button"></div></div></form></section><p class="nl-box__desc"><em><a href="https://www.smashingmagazine.com/the-smashing-newsletter/">Weekly tips on front-end &amp; UX</a>.<br>Trusted by 200,000+ folks.</em></p></div></div><div class="c-garfield-summary"><section aria-label="Quick summary" class="article__summary"><span id="article__start" class="summary__heading" aria-hidden="true"></span>We love client-side rendering for the way it relieves the server of taxing operations, but serving an empty HTML page often leads to taxing user experiences during the initial page load. We love server-side rendering because it allows us to serve static assets on speedy CDNs, but they’re unfit for large-scale projects with dynamic content. React Server Components (RSCs) combine the best of both worlds, and author Lazar Nikolov thoroughly examines how we got here with a deep look at the impact that RSCs have on the page load timeline.</section></div><div class="sponsor-panel c-felix-the-cat"><p class="sponsor-panel-content">This article has been kindly supported by our dear friends at <a href="https://sentry.io/welcome/">Sentry.io</a>, who help developers see what actually matters, solve quicker, and learn continuously about their apps. <em>Thank you!</em></p><a class="sponsor-panel-image" href="https://sentry.io/welcome/"><img src="https://files.smashing.media/articles/forensics-react-server-components/sentry-logo-white-bg.svg" loading="eager" width="200" alt="Sentry.io"></a></div><p>In this article, we’re going to look deeply at React Server Components (RSCs). They are the latest innovation in React’s ecosystem, leveraging both server-side and client-side rendering as well as <a href="https://en.wikipedia.org/wiki/Chunked_transfer_encoding">streaming HTML</a> to deliver content as fast as possible.</p><p>We will get really nerdy to get a full understanding of how RFCs fit into the React picture, the level of control they offer over the rendering lifecycle of components, and what page loads look like with RFCs in place.</p><p>But before we dive into all of that, I think it’s worth looking back at how React has rendered websites up until this point to set the context for why we need RFCs in the first place.</p><h2 id="the-early-days-react-client-side-rendering">The Early Days: React Client-Side Rendering&nbsp;<a class="anchor" href="#the-early-days-react-client-side-rendering">#</a></h2><p>The first React apps were rendered on the client side, i.e., in the browser. As developers, we wrote apps with JavaScript classes as components and packaged everything up using bundlers, like Webpack, in a nicely compiled and tree-shaken heap of code ready to ship in a production environment.</p><p>The HTML that returned from the server contained a few things, including:</p><ul><li>An HTML document with metadata in the <code>&lt;head&gt;</code> and a blank <code>&lt;div&gt;</code> in the <code>&lt;body&gt;</code> used as a hook to inject the app into the DOM;</li><li>JavaScript resources containing React’s core code and the actual code for the web app, which would generate the user interface and populate the app inside of the empty <code>&lt;div&gt;</code>.</li></ul><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/1-client-side-rendering-process.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="566" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/1-client-side-rendering-process.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/1-client-side-rendering-process.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/1-client-side-rendering-process.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/1-client-side-rendering-process.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/1-client-side-rendering-process.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/1-client-side-rendering-process.jpg" sizes="100vw" alt="Diagram of the client-side rendering process of a React app, starting with a blank loading page in the browser followed by a series of processes connected to CDNs and APIs to produce content on the loading page."></a><figcaption class="op-vertical-bottom">Figure 1. (<a href="https://files.smashing.media/articles/forensics-react-server-components/1-client-side-rendering-process.jpg">Large preview</a>)</figcaption></figure><p>A web app under this process is only fully interactive once JavaScript has fully completed its operations. You can probably already see the tension here that comes with an <strong>improved developer experience (DX) that negatively impacts the user experience (UX)</strong>.</p><p>The truth is that there were (and are) pros and cons to CSR in React. Looking at the positives, web applications delivered <strong>smooth, quick transitions</strong> that reduced the overall time it took to load a page, thanks to reactive components that update with user interactions without triggering page refreshes. CSR lightens the server load and allows us to serve assets from speedy content delivery networks (CDNs) capable of delivering content to users from a server location geographically closer to the user for even more optimized page loads.</p><p>There are also not-so-great consequences that come with CSR, most notably perhaps that components could fetch data independently, leading to <a href="https://blog.sentry.io/fetch-waterfall-in-react/"><strong>waterfall network requests</strong></a> that dramatically slow things down. This may sound like a minor nuisance on the UX side of things, but the damage can actually be quite large on a human level. Eric Bailey’s “<a href="https://ericwbailey.design/published/modern-health-frameworks-performance-and-harm/">Modern Health, frameworks, performance, and harm</a>” should be a cautionary tale for all CSR work.</p><p>Other negative CSR consequences are not quite as severe but still lead to damage. For example, it used to be that an HTML document containing nothing but metadata and an empty <code>&lt;div&gt;</code> was illegible to search engine crawlers that never get the fully-rendered experience. While that’s solved today, the SEO hit at the time was an anchor on company sites that rely on search engine traffic to generate revenue.</p><h2 id="the-shift-server-side-rendering-ssr">The Shift: Server-Side Rendering (SSR)&nbsp;<a class="anchor" href="#the-shift-server-side-rendering-ssr">#</a></h2><p>Something needed to change. CSR presented developers with a powerful new approach for constructing speedy, interactive interfaces, but users everywhere were inundated with blank screens and loading indicators to get there. The solution was to move the rendering experience from the <strong>client</strong> to the <strong>server</strong>. I know it sounds funny that we needed to improve something by going back to the way it was before.</p><p>So, yes, React gained server-side rendering (SSR) capabilities. At one point, SSR was such a topic in the React community that <a href="https://sentry.io/resources/moving-to-server-side-rendering/">it had a moment</a> in the spotlight. The move to SSR brought significant changes to app development, specifically in how it influenced React behavior and how content could be delivered by way of servers instead of browsers.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/2-diagram-server-side-rendering-process.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="600" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/2-diagram-server-side-rendering-process.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/2-diagram-server-side-rendering-process.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/2-diagram-server-side-rendering-process.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/2-diagram-server-side-rendering-process.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/2-diagram-server-side-rendering-process.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/2-diagram-server-side-rendering-process.jpg" sizes="100vw" alt="Diagram of the server-side rendering process of a React app, starting with a blank loading page in the browser followed by a screen of un-interactive content, then a fully interactive page of content."></a><figcaption class="op-vertical-bottom">Figure 2. (<a href="https://files.smashing.media/articles/forensics-react-server-components/2-diagram-server-side-rendering-process.jpg">Large preview</a>)</figcaption></figure><h3 id="addressing-csr-limitations">Addressing CSR Limitations&nbsp;<a class="anchor" href="#addressing-csr-limitations">#</a></h3><p>Instead of sending a blank HTML document with SSR, we rendered the initial HTML on the server and sent it to the browser. The browser was able to immediately start displaying the content without needing to show a loading indicator. This significantly improves the <a href="https://docs.sentry.io/product/performance/web-vitals/web-vitals-concepts/#first-contentful-paint-fcp">First Contentful Paint (FCP) performance metric in Web Vitals</a>.</p><p>Server-side rendering also fixed the SEO issues that came with CSR. Since the crawlers received the content of our websites directly, they were then able to index it right away. The data fetching that happens initially also takes place on the server, which is a plus because it’s closer to the data source and can eliminate fetch waterfalls <a href="https://blog.sentry.io/fetch-waterfall-in-react/#fetch-data-on-server-to-avoid-a-fetch-waterfall"><em>if done properly</em></a>.</p><h3 id="hydration">Hydration&nbsp;<a class="anchor" href="#hydration">#</a></h3><p>SSR has its own complexities. For React to make the static HTML received from the server interactive, it needs to <strong>hydrate</strong> it. Hydration is the process that happens when React reconstructs its Virtual Document Object Model (DOM) on the client side based on what was in the DOM of the initial HTML.</p><blockquote><strong>Note</strong>: React maintains its own <a href="https://legacy.reactjs.org/docs/faq-internals.html">Virtual DOM</a> because it’s faster to figure out updates on it instead of the actual DOM. It synchronizes the actual DOM with the Virtual DOM when it needs to update the UI but performs the diffing algorithm on the Virtual DOM.</blockquote><p>We now have two flavors of Reacts:</p><ol><li><strong>A server-side flavor</strong> that knows how to render static HTML from our component tree,</li><li><strong>A client-side flavor</strong> that knows how to make the page interactive.</li></ol><p>We’re still shipping React and code for the app to the browser because — in order to hydrate the initial HTML — React needs the same components on the client side that were used on the server. During hydration, <a href="https://css-tricks.com/how-react-reconciliation-works/">React performs a process called</a> <a href="https://css-tricks.com/how-react-reconciliation-works/"><em>reconciliation</em></a> in which it compares the server-rendered DOM with the client-rendered DOM and tries to identify differences between the two. If there are differences between the two DOMs, React attempts to fix them by rehydrating the component tree and updating the component hierarchy to match the server-rendered structure. And if there are <em>still</em> inconsistencies that cannot be resolved, React will throw errors to indicate the problem. This problem is commonly known as a <em>hydration error</em>.</p><h3 id="ssr-drawbacks">SSR Drawbacks&nbsp;<a class="anchor" href="#ssr-drawbacks">#</a></h3><p>SSR is not a silver bullet solution that addresses CSR limitations. SSR comes with its own drawbacks. Since we moved the initial HTML rendering and data fetching to the server, those servers are now experiencing a much greater load than when we loaded everything on the client.</p><p>Remember when I mentioned that SSR generally improves the FCP performance metric? That may be true, but the <a href="https://docs.sentry.io/product/performance/web-vitals/web-vitals-concepts/#time-to-first-byte-ttfb">Time to First Byte (TTFB) performance metric</a> took a negative hit with SSR. The browser literally has to wait for the server to fetch the data it needs, generate the initial HTML, and send the first byte. And while TTFB is not a Core Web Vital metric in itself, it influences the metrics. A negative TTFB leads to negative Core Web Vitals metrics.</p><p>Another drawback of SSR is that the entire page is unresponsive until client-side React has finished hydrating it. Interactive elements cannot listen and “react” to user interactions before React hydrates them, i.e., React attaches the intended event listeners to them. The hydration process is typically fast, but the internet connection and hardware capabilities of the device in use can slow down rendering by a noticeable amount.</p><h2 id="the-present-a-hybrid-approach">The Present: A Hybrid Approach&nbsp;<a class="anchor" href="#the-present-a-hybrid-approach">#</a></h2><p>So far, we have covered two different flavors of React rendering: CSR and SSR. While the two were attempts to improve one another, we now get the best of both worlds, so to speak, as SSR has branched into three additional React flavors that offer a hybrid approach in hopes of reducing the limitations that come with CSR and SSR.</p><p>We’ll look at the first two — <strong>static site generation</strong> and <strong>incremental static regeneration</strong> — before jumping into an entire discussion on React Server Components, the third flavor.</p><h3 id="static-site-generation-ssg">Static Site Generation (SSG)&nbsp;<a class="anchor" href="#static-site-generation-ssg">#</a></h3><p>Instead of regenerating the same HTML code on every request, we came up with SSG. This React flavor compiles and builds the entire app at build time, generating static (as in vanilla HTML and CSS) files that are, in turn, hosted on a speedy CDN.</p><p>As you might suspect, this hybrid approach to rendering is a nice fit for smaller projects where the content doesn’t change much, like a marketing site or a personal blog, as opposed to larger projects where content may change with user interactions, like an e-commerce site.</p><p>SSG reduces the burden on the server while improving performance metrics related to TTFB because the server no longer has to perform heavy, expensive tasks for re-rendering the page.</p><h3 id="incremental-static-regeneration-isr">Incremental Static Regeneration (ISR)&nbsp;<a class="anchor" href="#incremental-static-regeneration-isr">#</a></h3><p>One SSG drawback is having to rebuild all of the app’s code when a content change is needed. The content is set in stone — being static and all — and there’s no way to change just one part of it without rebuilding the whole thing.</p><p>The Next.js team created the second hybrid flavor of React that addresses the drawback of complete SSG rebuilds: <strong>incremental static regeneration (ISR)</strong>. The name says a lot about the approach in that ISR only rebuilds what’s needed instead of the entire thing. We generate the “initial version” of the page statically during build time but are also able to rebuild any page containing stale data <em>after</em> a user lands on it (i.e., the server request triggers the data check).</p><p>From that point on, the server will serve new versions of that page statically in increments when needed. That makes ISR a hybrid approach that is neatly positioned between SSG and traditional SSR.</p><p>At the same time, ISR does not address the “stale content” symptom, where users may visit a page before it has finished being generated. Unlike SSG, ISR needs an actual server to regenerate individual pages in response to a user’s browser making a server request. That means we lose the valuable ability to deploy ISR-based apps on a CDN for optimized asset delivery.</p><h2 id="the-future-react-server-components">The Future: React Server Components&nbsp;<a class="anchor" href="#the-future-react-server-components">#</a></h2><p>Up until this point, we’ve juggled between CSR, SSR, SSG, and ISR approaches, where all make some sort of trade-off, negatively affecting performance, development complexity, and user experience. Newly introduced <a href="https://nextjs.org/docs/app/building-your-application/rendering/server-components">React Server Components</a> (RSC) aim to address most of these drawbacks by allowing us — the developer — to <strong>choose the right rendering strategy for each individual React component</strong>.</p><p>RSCs can significantly reduce the amount of JavaScript shipped to the client since we can selectively decide which ones to serve statically on the server and which render on the client side. There’s a lot more control and flexibility for striking the right balance for your particular project.</p><blockquote><strong>Note:</strong> It’s important to keep in mind that as we adopt more advanced architectures, like RSCs, monitoring solutions become invaluable. Sentry offers robust <a href="https://docs.sentry.io/product/performance/">performance monitoring</a> and error-tracking capabilities that help you keep an eye on the real-world performance of your RSC-powered application. Sentry also helps you gain insights into how your releases are performing and how stable they are, which is yet another crucial feature to have while migrating your existing applications to RSCs. Implementing Sentry in an RSC-enabled framework like <a href="https://sentry.io/for/nextjs/">Next.js</a> is as easy as running a single terminal command.</blockquote><p>But what exactly <em>is</em> an RSC? Let’s pick one apart to see how it works under the hood.</p><h2 id="the-anatomy-of-react-server-components">The Anatomy of React Server Components&nbsp;<a class="anchor" href="#the-anatomy-of-react-server-components">#</a></h2><p>This new approach introduces two types of rendering components: <strong>Server Components</strong> and <strong>Client Components</strong>. The differences between these two are not <em>how</em> they function but <em>where</em> they execute and the environments they’re designed for. At the time of this writing, the only way to use RSCs is through React frameworks. And at the moment, there are only three frameworks that support them: <a href="https://nextjs.org/docs/app/building-your-application/rendering/server-components">Next.js</a>, <a href="https://www.gatsbyjs.com/docs/conceptual/partial-hydration/">Gatsby</a>, and <a href="https://redwoodjs.com/blog/rsc-now-in-redwoodjs">RedwoodJS</a>.</p><figure><a href="https://files.smashing.media/articles/forensics-react-server-components/3-wire-diagram-server-client-components.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="763" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/3-wire-diagram-server-client-components.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/3-wire-diagram-server-client-components.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/3-wire-diagram-server-client-components.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/3-wire-diagram-server-client-components.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/3-wire-diagram-server-client-components.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/3-wire-diagram-server-client-components.jpg" sizes="100vw" alt="Wire diagram showing connected server components and client components represented as gray and blue dots, respectively."></a><figcaption class="op-vertical-bottom">Figure 3: Example of an architecture consisting of Server Components and Client Components. (<a href="https://files.smashing.media/articles/forensics-react-server-components/3-wire-diagram-server-client-components.jpg">Large preview</a>)</figcaption></figure><h3 id="server-components">Server Components&nbsp;<a class="anchor" href="#server-components">#</a></h3><p>Server Components are designed to be executed on the server, and their code is never shipped to the browser. The HTML output and any props they might be accepting are the only pieces that are served. This approach has multiple performance benefits and user experience enhancements:</p><ul><li><strong>Server Components allow for large dependencies to remain on the server side.</strong><br>Imagine using a large library for a component. If you’re executing the component on the client side, it means that you’re also shipping the full library to the browser. With Server Components, you’re only taking the static HTML output and avoiding having to ship any JavaScript to the browser. Server Components are truly static, and they remove the whole hydration step.</li><li><strong>Server Components are located much closer to the data sources — e.g., databases or file systems — they need to generate code.</strong><br>They also leverage the server’s computational power to speed up compute-intensive rendering tasks and send only the generated results back to the client. They are also generated in a single pass, which <a href="https://blog.sentry.io/fetch-waterfall-in-react/#fetch-data-on-server-to-avoid-a-fetch-waterfall">avoids request waterfalls and HTTP round trips</a>.</li><li><strong>Server Components safely keep sensitive data and logic away from the browser.</strong><br>That’s thanks to the fact that personal tokens and API keys are executed on a secure server rather than the client.</li><li><strong>The rendering results can be cached and reused between subsequent requests and even across different sessions.</strong><br>This significantly reduces rendering time, as well as the overall amount of data that is fetched for each request.</li></ul><p>This architecture also makes use of <strong>HTML streaming</strong>, which means the server defers generating HTML for specific components and instead renders a fallback element in their place while it works on sending back the generated HTML. Streaming Server Components wrap components in <a href="https://react.dev/reference/react/Suspense"><code>&lt;Suspense&gt;</code></a> tags that provide a fallback value. The implementing framework uses the fallback initially but streams the newly generated content when it‘s ready. We’ll talk more about streaming, but let’s first look at Client Components and compare them to Server Components.</p><h3 id="client-components">Client Components&nbsp;<a class="anchor" href="#client-components">#</a></h3><p>Client Components are the components we already know and love. They’re executed on the client side. Because of this, Client Components are capable of handling user interactions and have access to the browser APIs like <code>localStorage</code> and geolocation.</p><p>The term “Client Component” doesn’t describe anything new; they merely are given the label to help distinguish the “old” CSR components from Server Components. Client Components are defined by a <a href="https://react.dev/reference/react/use-server"><code>"use client"</code></a> directive at the top of their files.</p><div class="code-toolbar"><pre class=" language-javascript"><code class=" language-javascript"><span class="token string">"use client"</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">LikeButton</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token function-variable function">likePost</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>button onClick<span class="token operator">=</span><span class="token punctuation">{</span>likePost<span class="token punctuation">}</span><span class="token operator">&gt;</span>Like<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div><p>In Next.js, all components are Server Components by default. That’s why we need to explicitly define our Client Components with <code>"use client"</code>. There’s also a <code>"use server"</code> directive, but it’s used for Server Actions (which are RPC-like actions that invoked from the client, but executed on the server). You don’t use it to define your Server Components.</p><p>You might (rightfully) assume that Client Components are only rendered on the client, but Next.js renders Client Components on the server to generate the initial HTML. As a result, browsers can immediately start rendering them and then perform hydration later.</p><h3 id="the-relationship-between-server-components-and-client-components">The Relationship Between Server Components and Client Components&nbsp;<a class="anchor" href="#the-relationship-between-server-components-and-client-components">#</a></h3><p>Client Components can only <em>explicitly</em> import other Client Components. In other words, we’re unable to import a Server Component into a Client Component because of re-rendering issues. But we can have Server Components in a Client Component’s subtree — only passed through the <code>children</code> prop. Since Client Components live in the browser and they handle user interactions or define their own state, they get to re-render often. When a Client Component re-renders, so will its subtree. But if its subtree contains Server Components, how would they re-render? They don’t live on the client side. That’s why the React team put that limitation in place.</p><p>But hold on! We actually <em>can</em> import Server Components into Client Components. It’s just not a direct one-to-one relationship because the Server Component will be converted into a Client Component. If you’re using server APIs that you can’t use in the browser, you’ll get an error; if not — you’ll have a Server Component whose code gets “leaked” to the browser.</p><p>This is an incredibly important nuance to keep in mind as you work with RSCs.</p><h2 id="the-rendering-lifecycle">The Rendering Lifecycle&nbsp;<a class="anchor" href="#the-rendering-lifecycle">#</a></h2><p>Here’s the order of operations that Next.js takes to stream contents:</p><ol><li>The app router matches the page’s URL to a Server Component, builds the component tree, and instructs the server-side React to render that Server Component and all of its children components.</li><li>During render, React generates an “RSC Payload”. The RSC Payload informs Next.js about the page and what to expect in return, as well as what to fall back to during a <code>&lt;Suspense&gt;</code>.</li><li>If React encounters a suspended component, it pauses rendering that subtree and uses the suspended component’s fallback value.</li><li>When React loops through the last static component, Next.js prepares the generated HTML and the RSC Payload before streaming it back to the client through one or multiple chunks.</li><li>The client-side React then uses the instructions it has for the RSC Payload and client-side components to render the UI. It also hydrates each Client Component as they load.</li><li>The server streams in the suspended Server Components as they become available as an RSC Payload. Children of Client Components are also hydrated at this time if the suspended component contains any.</li></ol><p>We will look at the RSC rendering lifecycle from the browser’s perspective momentarily. For now, the following figure illustrates the outlined steps we covered.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/4-wire-diagram-rsc-rendering-lifecycle.jpg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="489" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/4-wire-diagram-rsc-rendering-lifecycle.jpg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/4-wire-diagram-rsc-rendering-lifecycle.jpg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/4-wire-diagram-rsc-rendering-lifecycle.jpg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/4-wire-diagram-rsc-rendering-lifecycle.jpg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/4-wire-diagram-rsc-rendering-lifecycle.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/4-wire-diagram-rsc-rendering-lifecycle.jpg" sizes="100vw" alt="Wire diagram of the RSC rendering lifecycle going from a blank page to a page shell to a complete page."></a><figcaption class="op-vertical-bottom">Figure 4: Diagram of the RSC Rendering Lifecycle. (<a href="https://files.smashing.media/articles/forensics-react-server-components/4-wire-diagram-rsc-rendering-lifecycle.jpg">Large preview</a>)</figcaption></figure><p>We’ll see this operation flow from the browser’s perspective in just a bit.</p><h2 id="rsc-payload">RSC Payload&nbsp;<a class="anchor" href="#rsc-payload">#</a></h2><p>The RSC payload is a special data format that the server generates as it renders the component tree, and it includes the following:</p><ul><li>The rendered HTML,</li><li>Placeholders where the Client Components should be rendered,</li><li>References to the Client Components’ JavaScript files,</li><li>Instructions on which JavaScript files it should invoke,</li><li>Any props passed from a Server Component to a Client Component.</li></ul><p>There’s no reason to worry much about the RSC payload, but it’s worth understanding what exactly the RSC payload contains. Let’s examine an example (truncated for brevity) from a <a href="https://github.com/nikolovlazar/rsc-forensics">demo app I created</a>:</p><div class="break-out"><div class="code-toolbar"><pre class=" language-javascript"><code class=" language-javascript"><span class="token number">1</span><span class="token operator">:</span><span class="token constant">HL</span><span class="token punctuation">[</span><span class="token string">"/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2"</span><span class="token punctuation">,</span><span class="token string">"font"</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">"crossOrigin"</span><span class="token operator">:</span><span class="token string">""</span><span class="token punctuation">,</span><span class="token string">"type"</span><span class="token operator">:</span><span class="token string">"font/woff2"</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token number">2</span><span class="token operator">:</span><span class="token constant">HL</span><span class="token punctuation">[</span><span class="token string">"/_next/static/css/app/layout.css?v=1711137019097"</span><span class="token punctuation">,</span><span class="token string">"style"</span><span class="token punctuation">]</span>
<span class="token number">0</span><span class="token operator">:</span><span class="token string">"$L3"</span>
<span class="token number">4</span><span class="token operator">:</span><span class="token constant">HL</span><span class="token punctuation">[</span><span class="token string">"/_next/static/css/app/page.css?v=1711137019097"</span><span class="token punctuation">,</span><span class="token string">"style"</span><span class="token punctuation">]</span>
<span class="token number">5</span><span class="token operator">:</span><span class="token constant">I</span><span class="token punctuation">[</span><span class="token string">"(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js"</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"app-pages-internals"</span><span class="token punctuation">,</span><span class="token string">"static/chunks/app-pages-internals.js"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">]</span>
<span class="token number">8</span><span class="token operator">:</span><span class="token string">"$Sreact.suspense"</span>
a<span class="token operator">:</span><span class="token constant">I</span><span class="token punctuation">[</span><span class="token string">"(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js"</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"app-pages-internals"</span><span class="token punctuation">,</span><span class="token string">"static/chunks/app-pages-internals.js"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">]</span>
b<span class="token operator">:</span><span class="token constant">I</span><span class="token punctuation">[</span><span class="token string">"(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js"</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"app-pages-internals"</span><span class="token punctuation">,</span><span class="token string">"static/chunks/app-pages-internals.js"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">]</span>
d<span class="token operator">:</span><span class="token constant">I</span><span class="token punctuation">[</span><span class="token string">"(app-pages-browser)/./src/app/global-error.jsx"</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"app/global-error"</span><span class="token punctuation">,</span><span class="token string">"static/chunks/app/global-error.js"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">""</span><span class="token punctuation">]</span>
f<span class="token operator">:</span><span class="token constant">I</span><span class="token punctuation">[</span><span class="token string">"(app-pages-browser)/./src/components/clearCart.js"</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"app/page"</span><span class="token punctuation">,</span><span class="token string">"static/chunks/app/page.js"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">"ClearCart"</span><span class="token punctuation">]</span>
<span class="token number">7</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">"$"</span><span class="token punctuation">,</span><span class="token string">"main"</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">"className"</span><span class="token operator">:</span><span class="token string">"page_main__GlU4n"</span><span class="token punctuation">,</span><span class="token string">"children"</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"$"</span><span class="token punctuation">,</span><span class="token string">"$Lf"</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"$"</span><span class="token punctuation">,</span><span class="token string">"$8"</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">"fallback"</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">"$"</span><span class="token punctuation">,</span><span class="token string">"p"</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">"children"</span><span class="token operator">:</span><span class="token string">"🌀 loading products..."</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">"children"</span><span class="token operator">:</span><span class="token string">"$L10"</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
c<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"$"</span><span class="token punctuation">,</span><span class="token string">"meta"</span><span class="token punctuation">,</span><span class="token string">"0"</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">"name"</span><span class="token operator">:</span><span class="token string">"viewport"</span><span class="token punctuation">,</span><span class="token string">"content"</span><span class="token operator">:</span><span class="token string">"width=device-width, initial-scale=1"</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token operator">...</span>
<span class="token number">9</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">"$"</span><span class="token punctuation">,</span><span class="token string">"p"</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">"children"</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">"🛍️ "</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token number">11</span><span class="token operator">:</span><span class="token constant">I</span><span class="token punctuation">[</span><span class="token string">"(app-pages-browser)/./src/components/addToCart.js"</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">"app/page"</span><span class="token punctuation">,</span><span class="token string">"static/chunks/app/page.js"</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token string">"AddToCart"</span><span class="token punctuation">]</span>
<span class="token number">10</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">"$"</span><span class="token punctuation">,</span><span class="token string">"ul"</span><span class="token punctuation">,</span><span class="token keyword">null</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">"children"</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">"$"</span><span class="token punctuation">,</span><span class="token string">"li"</span><span class="token punctuation">,</span><span class="token string">"1"</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token string">"children"</span><span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">"Gloves"</span><span class="token punctuation">,</span><span class="token string">" - $"</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token punctuation">[</span>"$<span class="token operator">...</span>
</code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div></div><p>To find this code in the demo app, open your browser’s developer tools at the Elements tab and look at the <code>&lt;script&gt;</code> tags at the bottom of the page. They’ll contain lines like:</p><div class="code-toolbar"><pre class=" language-javascript"><code class=" language-javascript">self<span class="token punctuation">.</span>__next_f<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">"PAYLOAD_STRING_HERE"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span>
</code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div><p>Every line from the snippet above is an individual RSC payload. You can see that each line starts with a number or a letter, followed by a colon, and then an array that’s sometimes prefixed with letters. We won’t get into too deep in detail as to what they mean, but in general:</p><ul><li><strong><code>HL</code> payloads</strong> are called “hints” and link to specific resources like CSS and fonts.</li><li><strong><code>I</code> payloads</strong> are called “modules,” and they invoke specific scripts. This is how Client Components are being loaded as well. If the Client Component is part of the main bundle, it’ll execute. If it’s not (meaning it’s lazy-loaded), a fetcher script is added to the main bundle that fetches the component’s CSS and JavaScript files when it needs to be rendered. There’s going to be an <code>I</code> payload sent from the server that invokes the fetcher script when needed.</li><li><strong><code>"$"</code> payloads</strong> are DOM definitions generated for a certain Server Component. They are usually accompanied by actual static HTML streamed from the server. That’s what happens when a suspended component becomes ready to be rendered: the server generates its static HTML and RSC Payload and then streams both to the browser.</li></ul><h2 id="streaming">Streaming&nbsp;<a class="anchor" href="#streaming">#</a></h2><p>Streaming allows us to progressively render the UI from the server. With RSCs, each component is capable of fetching its own data. Some components are fully static and ready to be sent immediately to the client, while others require more work before loading. Based on this, Next.js splits that work into multiple chunks and streams them to the browser as they become ready. So, when a user visits a page, the server invokes all Server Components, generates the initial HTML for the page (i.e., the page shell), replaces the “suspended” components’ contents with their fallbacks, and streams all of that through one or multiple chunks back to the client.</p><p>The server returns a <code>Transfer-Encoding: chunked</code> header that lets the browser know to expect streaming HTML. This prepares the browser for receiving multiple chunks of the document, rendering them as it receives them. We can actually see the header when opening Developer Tools at the Network tab. Trigger a refresh and click on the document request.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/5-streaming-header.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="238" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/5-streaming-header.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/5-streaming-header.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/5-streaming-header.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/5-streaming-header.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/5-streaming-header.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/5-streaming-header.jpeg" sizes="100vw" alt="Response header output highlighting the line containing the chunked transfer endcoding"></a><figcaption class="op-vertical-bottom">Figure 5: Providing a hint to the browser to expect HTML streaming. (<a href="https://files.smashing.media/articles/forensics-react-server-components/5-streaming-header.jpeg">Large preview</a>)</figcaption></figure><p>We can also debug the way Next.js sends the chunks in a terminal with the <code>curl</code> command:</p><div class="code-toolbar"><pre class="  language-bash"><code class="  language-bash"><span class="token function">curl</span> -D - --raw localhost:3000 <span class="token operator">&gt;</span> chunked-response.txt
</code></pre><div class="toolbar"><div class="toolbar-item"><button type="button">Copy</button></div></div></div><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/6-chunked-response.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="416" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/6-chunked-response.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/6-chunked-response.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/6-chunked-response.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/6-chunked-response.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/6-chunked-response.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/6-chunked-response.jpeg" sizes="100vw" alt="Headers and chunked HTML payloads."></a><figcaption class="op-vertical-bottom">Figure 6. (<a href="https://files.smashing.media/articles/forensics-react-server-components/6-chunked-response.jpeg">Large preview</a>)</figcaption></figure><p>You probably see the pattern. For each chunk, the server responds with the chunk’s size before sending the chunk’s contents. Looking at the output, we can see that the server streamed the entire page in 16 different chunks. At the end, the server sends back a zero-sized chunk, indicating the end of the stream.</p><p>The first chunk starts with the <code>&lt;!DOCTYPE html&gt;</code> declaration. The second-to-last chunk, meanwhile, contains the closing <code>&lt;/body&gt;</code> and <code>&lt;/html&gt;</code> tags. So, we can see that the server streams the entire document from top to bottom, then pauses to wait for the suspended components, and finally, at the end, closes the body and HTML before it stops streaming.</p><p>Even though the server hasn’t completely finished streaming the document, the browser’s fault tolerance features allow it to draw and invoke whatever it has at the moment without waiting for the closing <code>&lt;/body&gt;</code> and <code>&lt;/html&gt;</code> tags.</p><h3 id="suspending-components">Suspending Components&nbsp;<a class="anchor" href="#suspending-components">#</a></h3><p>We learned from the render lifecycle that when a page is visited, Next.js matches the RSC component for that page and asks React to render its subtree in HTML. When React stumbles upon a suspended component (i.e., async function component), it grabs its fallback value from the <code>&lt;Suspense&gt;</code> component (or the <code>loading.js</code> file if it’s a Next.js route), renders that instead, then continues loading the other components. Meanwhile, the RSC invokes the async component in the background, which is streamed later as it finishes loading.</p><p>At this point, Next.js has returned a full page of static HTML that includes either the components themselves (rendered in static HTML) or their fallback values (if they’re suspended). It takes the static HTML and RSC payload and streams them back to the browser through one or multiple chunks.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/7-fallbacks-suspended-components.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/7-fallbacks-suspended-components.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/7-fallbacks-suspended-components.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/7-fallbacks-suspended-components.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/7-fallbacks-suspended-components.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/7-fallbacks-suspended-components.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/7-fallbacks-suspended-components.jpeg" sizes="100vw" alt="Showing suspended component fallbacks"></a><figcaption class="op-vertical-bottom">Figure 7. (<a href="https://files.smashing.media/articles/forensics-react-server-components/7-fallbacks-suspended-components.jpeg">Large preview</a>)</figcaption></figure><p>As the suspended components finish loading, React generates HTML recursively while looking for other nested <code>&lt;Suspense&gt;</code> boundaries, generates their RSC payloads and then lets Next.js stream the HTML and RSC Payload back to the browser as new chunks. When the browser receives the new chunks, it has the HTML and RSC payload it needs and is ready to replace the fallback element from the DOM with the newly-streamed HTML. And so on.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/8-suspended-components-html.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="399" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/8-suspended-components-html.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/8-suspended-components-html.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/8-suspended-components-html.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/8-suspended-components-html.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/8-suspended-components-html.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/8-suspended-components-html.jpeg" sizes="100vw" alt="Static HTML and RSC Payload replacing suspended fallback values."></a><figcaption class="op-vertical-bottom">Figure 8. (<a href="https://files.smashing.media/articles/forensics-react-server-components/8-suspended-components-html.jpeg">Large preview</a>)</figcaption></figure><p>In Figures 7 and 8, notice how the fallback elements have a unique ID in the form of <code>B:0</code>, <code>B:1</code>, and so on, while the actual components have a similar ID in a similar form: <code>S:0</code> and <code>S:1</code>, and so on.</p><p>Along with the first chunk that contains a suspended component’s HTML, the server also ships an <code>$RC</code> function (i.e., <code>completeBoundary</code> from <a href="https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js#L46">React’s source code</a>) that knows how to find the <code>B:0</code> fallback element in the DOM and replace it with the <code>S:0</code> template it received from the server. That’s the “replacer” function that lets us see the component contents when they arrive in the browser.</p><p>The entire page eventually finishes loading, chunk by chunk.</p><h3 id="lazy-loading-components">Lazy-Loading Components&nbsp;<a class="anchor" href="#lazy-loading-components">#</a></h3><p>If a suspended Server Component contains a lazy-loaded Client Component, Next.js will also send an RSC payload chunk containing instructions on how to fetch and load the lazy-loaded component’s code. This represents a <em>significant performance improvement</em> because the page load isn’t dragged out by JavaScript, which might not even be loaded during that session.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/9-fetching-lazy-loaded-scripts.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="442" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/9-fetching-lazy-loaded-scripts.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/9-fetching-lazy-loaded-scripts.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/9-fetching-lazy-loaded-scripts.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/9-fetching-lazy-loaded-scripts.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/9-fetching-lazy-loaded-scripts.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/9-fetching-lazy-loaded-scripts.jpeg" sizes="100vw" alt="Fetching additional JavaScript and CSS files for a lazy-loaded Client Component, as shown in developer tools."></a><figcaption class="op-vertical-bottom">Figure 9. (<a href="https://files.smashing.media/articles/forensics-react-server-components/9-fetching-lazy-loaded-scripts.jpeg">Large preview</a>)</figcaption></figure><p>At the time I’m writing this, the dynamic method to lazy-load a Client Component in a Server Component in Next.js does not work as you might expect. To effectively lazy-load a Client Component, put it in a <a href="https://github.com/nikolovlazar/rsc-forensics/blob/main/src/components/addToCartWrapper.js">“wrapper” Client Component</a> that uses the <code>dynamic</code> method itself to lazy-load the actual Client Component. The wrapper will be turned into a script that fetches and loads the Client Component’s JavaScript and CSS files at the time they’re needed.</p><h3 id="tl-dr">TL;DR&nbsp;<a class="anchor" href="#tl-dr">#</a></h3><p>I know that’s a lot of plates spinning and pieces moving around at various times. What it boils down to, however, is that a page visit triggers Next.js to render as much HTML as it can, using the fallback values for any suspended components, and then sends that to the browser. Meanwhile, Next.js triggers the suspended async components and gets them formatted in HTML and contained in RSC Payloads that are streamed to the browser, one by one, along with an <code>$RC</code> script that knows how to swap things out.</p><h2 id="the-page-load-timeline">The Page Load Timeline&nbsp;<a class="anchor" href="#the-page-load-timeline">#</a></h2><p>By now, we should have a solid understanding of how RSCs work, how Next.js handles their rendering, and how all the pieces fit together. In this section, we’ll zoom in on what exactly happens when we visit an RSC page in the browser.</p><h3 id="the-initial-load">The Initial Load&nbsp;<a class="anchor" href="#the-initial-load">#</a></h3><p>As we mentioned in the TL;DR section above, when visiting a page, Next.js will render the initial HTML minus the suspended component and stream it to the browser as part of the first streaming chunks.</p><p>To see everything that happens during the page load, we’ll visit the “Performance” tab in Chrome DevTools and click on the “reload” button to reload the page and capture a profile. Here’s what that looks like:</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/10-first-chunks-being-streamed.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="442" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/10-first-chunks-being-streamed.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/10-first-chunks-being-streamed.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/10-first-chunks-being-streamed.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/10-first-chunks-being-streamed.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/10-first-chunks-being-streamed.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/10-first-chunks-being-streamed.jpeg" sizes="100vw" alt="Showing the first chunks of HTML streamed at the beginning of the timeline in DevTools."></a><figcaption class="op-vertical-bottom">Figure 10. (<a href="https://files.smashing.media/articles/forensics-react-server-components/10-first-chunks-being-streamed.jpeg">Large preview</a>)</figcaption></figure><p>When we zoom in at the very beginning, we can see the first “Parse HTML” span. That’s the server streaming the first chunks of the document to the browser. The browser has just received the initial HTML, which contains the page shell and a few links to resources like fonts, CSS files, and JavaScript. The browser starts to invoke the scripts.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/11-first-frames.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="442" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/11-first-frames.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/11-first-frames.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/11-first-frames.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/11-first-frames.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/11-first-frames.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/11-first-frames.jpeg" sizes="100vw" alt="The first frames appear, and parts of the page are rendered"></a><figcaption class="op-vertical-bottom">Figure 11. (<a href="https://files.smashing.media/articles/forensics-react-server-components/11-first-frames.jpeg">Large preview</a>)</figcaption></figure><p>After some time, we start to see the page’s first frames appear, along with the initial JavaScript scripts being loaded and hydration taking place. If you look at the frame closely, you’ll see that the whole page shell is rendered, and “loading” components are used in the place where there are suspended Server Components. You might notice that this takes place around 800ms, while the browser started to get the first HTML at 100ms. During those 700ms, the browser is continuously receiving chunks from the server.</p><p>Bear in mind that this is a Next.js demo app running locally in development mode, so it’s going to be slower than when it’s running in production mode.</p><h3 id="the-suspended-component">The Suspended Component&nbsp;<a class="anchor" href="#the-suspended-component">#</a></h3><p>Fast forward few seconds and we see another “Parse HTML” span in the page load timeline, but this one it indicates that a suspended Server Component finished loading and is being streamed to the browser.</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/12-suspended-component.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" height="442" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/12-suspended-component.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/12-suspended-component.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/12-suspended-component.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/12-suspended-component.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/12-suspended-component.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/12-suspended-component.jpeg" sizes="100vw" alt="The suspended component’s HTML and RSC Payload are streamed to the browser, as shown in the developer tools Network tab."></a><figcaption class="op-vertical-bottom">Figure 12. (<a href="https://files.smashing.media/articles/forensics-react-server-components/12-suspended-component.jpeg">Large preview</a>)</figcaption></figure><p>We can also see that a lazy-loaded Client Component is discovered at the same time, and it contains CSS and JavaScript files that need to be fetched. These files weren’t part of the initial bundle because the component isn’t needed until later on; the code is split into their own files.</p><p>This way of code-splitting certainly improves the performance of the initial page load. It also makes sure that the Client Component’s code is shipped only if it’s needed. If the Server Component (which acts as the Client Component’s parent component) throws an error, then the Client Component does not load. It doesn’t make sense to load all of its code before we know whether it will load or not.</p><p>Figure 12 shows the <code>DOMContentLoaded</code> event is reported at the end of the page load timeline. And, just before that, we can see that the <code>localhost</code> HTTP request comes to an end. That means the server has likely sent the last zero-sized chunk, indicating to the client that the data is fully transferred and that the streaming communication can be closed.</p><h3 id="the-end-result">The End Result&nbsp;<a class="anchor" href="#the-end-result">#</a></h3><p>The main <code>localhost</code> HTTP request took around five seconds, but thanks to streaming, we began seeing page contents load much earlier than that. If this was a traditional SSR setup, we would likely be staring at a blank screen for those five seconds before anything arrives. On the other hand, if this was a traditional CSR setup, we would likely have shipped <em>a lot</em> more of JavaScript and put a heavy burden on both the browser and network.</p><p>This way, however, the app was fully interactive in those five seconds. We were able to navigate between pages and interact with Client Components that have loaded as part of the initial main bundle. This is a pure win from a user experience standpoint.</p><h2 id="conclusion">Conclusion&nbsp;<a class="anchor" href="#conclusion">#</a></h2><p>RSCs mark a significant evolution in the React ecosystem. They leverage the strengths of server-side and client-side rendering while embracing HTML streaming to speed up content delivery. This approach not only addresses the SEO and loading time issues we experience with CSR but also improves SSR by reducing server load, thus enhancing performance.</p><p>I’ve refactored the same RSC app I shared earlier so that it uses the Next.js Page router with SSR. The improvements in RSCs are significant:</p><figure class="break-out article__image"><a href="https://files.smashing.media/articles/forensics-react-server-components/13-ssr-vs-rscs.jpeg"><img loading="lazy" decoding="async" fetchpriority="low" width="800" srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/13-ssr-vs-rscs.jpeg 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_800/https://files.smashing.media/articles/forensics-react-server-components/13-ssr-vs-rscs.jpeg 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1200/https://files.smashing.media/articles/forensics-react-server-components/13-ssr-vs-rscs.jpeg 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_1600/https://files.smashing.media/articles/forensics-react-server-components/13-ssr-vs-rscs.jpeg 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_2000/https://files.smashing.media/articles/forensics-react-server-components/13-ssr-vs-rscs.jpeg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_80/w_400/https://files.smashing.media/articles/forensics-react-server-components/13-ssr-vs-rscs.jpeg" sizes="100vw" alt="Comparing Next.js Page Router and App Router, side-by-side."></a><figcaption class="op-vertical-bottom">Figure 13. (<a href="https://files.smashing.media/articles/forensics-react-server-components/13-ssr-vs-rscs.jpeg">Large preview</a>)</figcaption></figure><p>Looking at these two reports I pulled from Sentry, we can see that streaming allows the page to start loading its resources before the actual request finishes. This significantly improves the Web Vitals metrics, which we see when comparing the two reports.</p><p>The conclusion: <strong>Users enjoy faster, more reactive interfaces with an architecture that relies on RSCs.</strong></p><p>The RSC architecture introduces two new component types: Server Components and Client Components. This division helps React and the frameworks that rely on it — like Next.js — streamline content delivery while maintaining interactivity.</p><p>However, this setup also introduces new challenges in areas like state management, authentication, and component architecture. Exploring those challenges is a great topic for another blog post!</p><p>Despite these challenges, the benefits of RSCs present a compelling case for their adoption. We definitely will see guides published on how to address RSC’s challenges as they mature, but, in my opinion, they already look like the future of rendering practices in modern web development.</p><div class="signature"><img src="https://www.smashingmagazine.com/images/logo/logo--red.png" alt="Smashing Editorial" width="35" height="46" loading="lazy" decoding="async">
<span>(gg, yk)</span></div><div class="category__related--alt"><span class="italic grey mrs mbm block">Explore more on</span><nav class="subnav ib" role="navigation"><ul class="subnav__primary subnav__subtags flex flex-wrap"><li class="subnav-item subnav-item--green"><a class="nav-item-link" href="/category/react">React</a></li><li class="subnav-item subnav-item--green"><a class="nav-item-link" href="/category/javascript">JavaScript</a></li><li class="subnav-item subnav-item--green"><a class="nav-item-link" href="/category/coding">Coding</a></li><li class="subnav-item subnav-item--green"><a class="nav-item-link" href="/category/performance">Performance</a></li></ul></nav></div></div></div></div><link href="/css/non-critical-article-manual-felix.css" media="all" onload="this.media='all'" rel="stylesheet"><link href="/css/article-dark-mode-v3.css" media="(prefers-color-scheme: dark)" rel="stylesheet"><div data-component="CommentsArea" id="comments-forensics-react-server-components" data-thread="/2024/05/forensics-react-server-components/" data-date="2024-05-09 13:00:00 +0000 UTC"><div><div class="loader-wrapper " aria-hidden="true"><div class="search-loader search-loader--red"><span class="loader"></span><span class="loader"></span><span class="loader"></span></div></div></div></div></div></article></main><div data-component="CookieBanner"><div><div class="cookie-banner"><p>We use cookies for login, checkout and stats. Learn more in our <a href="/privacy-policy/">privacy settings</a>.</p><div class="cookie-banner__container"><button class="btn btn--white btn--white--bordered cookies--btn btn—-medium mr5">No, thanks.</button><button class="btn cookies--btn btn--green btn—-medium btn--text-shadow mr0">It’s okay.</button></div></div></div></div><div id="cart" class="cart-wrapper" data-component="MiniCart"><div></div></div><footer class="main-footer"><div class="container"><div class="col-12"><div class="footer__topics open"><h4 class="footer__topics__title" id="topics">Browse All Smashing Magazine Topics&nbsp;<a class="anchor" href="#topics">#</a></h4><ul class="footer__topics__list"><li class="footer__topics__item"><a href="/category/accessibility">Accessibility</a></li><li class="footer__topics__item"><a href="/category/best-practices">Best practices</a></li><li class="footer__topics__item"><a href="/category/business">Business</a></li><li class="footer__topics__item"><a href="/category/career">Career</a></li><li class="footer__topics__item"><a href="/category/checklists">Checklists</a></li><li class="footer__topics__item"><a href="/category/css">CSS</a></li><li class="footer__topics__item"><a href="/category/data-visualization">Data Visualization</a></li><li class="footer__topics__item"><a href="/category/design">Design</a></li><li class="footer__topics__item"><a href="/category/design-patterns">Design Patterns</a></li><li class="footer__topics__item"><a href="/category/design-systems">Design Systems</a></li><li class="footer__topics__item"><a href="/category/e-commerce">E-Commerce</a></li><li class="footer__topics__item"><a href="/category/figma">Figma</a></li><li class="footer__topics__item"><a href="/category/freebies">Freebies</a></li><li class="footer__topics__item"><a href="/category/html">HTML</a></li><li class="footer__topics__item"><a href="/category/illustrator">Illustrator</a></li><li class="footer__topics__item"><a href="/category/inspiration">Inspiration</a></li><li class="footer__topics__item"><a href="/category/javascript">JavaScript</a></li><li class="footer__topics__item"><a href="/category/mobile">Mobile</a></li><li class="footer__topics__item"><a href="/category/performance">Performance</a></li><li class="footer__topics__item"><a href="/category/privacy">Privacy</a></li><li class="footer__topics__item"><a href="/category/react">React</a></li><li class="footer__topics__item"><a href="/category/responsive-design">Responsive Design</a></li><li class="footer__topics__item"><a href="/category/round-ups">Round-Ups</a></li><li class="footer__topics__item"><a href="/category/seo">SEO</a></li><li class="footer__topics__item"><a href="/category/typography">Typography</a></li><li class="footer__topics__item"><a href="/category/tools">Tools</a></li><li class="footer__topics__item"><a href="/category/ui">UI</a></li><li class="footer__topics__item"><a href="/category/usability">Usability</a></li><li class="footer__topics__item"><a href="/category/ux">UX</a></li><li class="footer__topics__item"><a href="/category/vue">Vue</a></li><li class="footer__topics__item"><a href="/category/wallpapers">Wallpapers</a></li><li class="footer__topics__item"><a href="/category/web-design">Web Design</a></li><li class="footer__topics__item"><a href="/category/workflow">Workflow</a></li></ul></div></div><div class="col-12"><div class="footer__notes"><p>With a commitment to quality content for the design community.</p><p>Founded by <a href="https://smart-interface-design-patterns.com">Vitaly Friedman</a> and <a href="https://conterest.de/">Sven Lennartz</a>. <span class="lining-figures">2006–2024</span>.</p><p>Smashing is proudly running on <a href="https://www.netlify.com/?utm_source=link&amp;utm_medium=parter&amp;utm_campaign=sm-footer">Netlify</a>, <a href="https://www.tina.io/?utm_source=link&amp;utm_medium=parter&amp;utm_campaign=sm-footer">TinaCMS</a> and <a href="https://www.swell.is/?utm_source=link&amp;utm_medium=parter&amp;utm_campaign=sm-footer">Swell</a>.</p><p>Fonts by <a href="http://latinotype.com/">Latinotype</a>.</p></div><ul class="footer__links"><li>✎ <a href="/write-for-us/">Write for us</a></li><li><a href="/contact/">Contact us</a></li><li><a href="/about/">About us (Impressum)</a></li><li><a href="/privacy-policy/">Privacy policy</a></li><li><a href="/auth/">Membership login</a></li><li><a href="/delivery-times/">Delivery times</a></li><li><a href="mailto:advertising@smashingmagazine.com?subject=Let’s talk about advertising">Advertise</a></li></ul></div></div><div class="back-to-top-wrapper" id="back_top"><a href="#top" data-scroll="#top" class="back-to-top" title="Back to top"><svg viewBox="0 0 100 100" width="25" height="25" tabindex="-1" role="img" aria-labelledby="title"><title id="title">Back to top</title><path d="M10 50l50 50L70 90 30 50 70 10 60 0z" transform="translate(0 0) rotate(90 50 50)" fill="#fff" stroke="#fff"></path><image src="/images/back-to-top-arrow.png" alt="Back to top arrow" width="100%" height="100%"></image></svg></a></div></footer><a rel="me" href="https://mastodon.social/@smashingmag" class="hidden"></a><div data-handler="PostLoad"><span></span></div><script delay="/js/app.js" defer="" fetchpriority="low" src="/js/app.js"></script><script>window.PRODUCTS=[];try{window.PRODUCTS=JSON.parse('[{"active":true,"attributes":{},"bundle":null,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","currency":{"usd":{"price":0}},"dateCreated":"2022-09-07T13:10:16.430Z","dateUpdated":"2022-09-07T13:10:27.875Z","delivery":null,"description":null,"id":"6318983818a7d600120c57e8","image":"https://cdn.schema.io/smashing-magazine/6318982d18a7d600120c57d6/e75b002fbe9416ed104b1236fcf493aa","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-09-07T13:10:05.966Z","filename":null,"height":697,"id":"6318982d18a7d600120c57d6","length":14832,"md5":"e75b002fbe9416ed104b1236fcf493aa","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6318982d18a7d600120c57d6/e75b002fbe9416ed104b1236fcf493aa","width":480},"id":"6318983818a7d600120c57e9"}],"metaDescription":null,"metaTitle":null,"name":"Inclusive Components (eBook)","options":[],"price":0,"prices":{"eur":{},"usd":{"price":0}},"productType":"ebook","sku":"inclusive-components-ebook","slug":"inclusive-components","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"attributes":{},"bundle":null,"categories":[],"categoryId":null,"currency":{"eur":{"price":19,"salePrice":14.9},"usd":{"price":19,"salePrice":14.9}},"dateCreated":"2022-09-06T21:15:51.046Z","delivery":null,"description":null,"id":"6317b887c6ac2e0012db7e0b","image":"https://cdn.schema.io/smashing-magazine/6317b85f18a7d600120c3a85/4f6f2378b50e692f1e06d7f2bf14a0cf","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-09-06T21:15:11.447Z","filename":null,"height":365,"id":"6317b85f18a7d600120c3a85","length":9032,"md5":"4f6f2378b50e692f1e06d7f2bf14a0cf","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6317b85f18a7d600120c3a85/4f6f2378b50e692f1e06d7f2bf14a0cf","width":311},"id":"6317b887c6ac2e0012db7e0c"}],"metaDescription":null,"metaTitle":null,"name":"Understanding Privacy (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":14.9},"usd":{"price":19,"salePrice":14.9}},"productType":"ebook","sale":true,"salePrice":14.9,"sku":"understanding-privacy-ebook","slug":"understanding-privacy-e-book","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"attributes":{},"bundle":null,"bundlePrices":{"eur":{"price":63,"salePrice":47.725},"usd":{"price":63,"salePrice":47.725}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","crossSellProductId":"6317b887c6ac2e0012db7e0b","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"6317b8a7d461ce936bc9e0e8","productId":"6317b887c6ac2e0012db7e0b"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2022-09-06T21:13:53.600Z","dateUpdated":"2022-09-20T09:12:09.264Z","delivery":"shipment","description":null,"id":"6317b811a385d4001364fd3d","image":"https://cdn.schema.io/smashing-magazine/6317b854d3999b00130a0f23/5792615a5f7216940a2614bb80d3572a","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-09-06T21:15:00.552Z","filename":null,"height":697,"id":"6317b854d3999b00130a0f23","length":64084,"md5":"5792615a5f7216940a2614bb80d3572a","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6317b854d3999b00130a0f23/5792615a5f7216940a2614bb80d3572a","width":480},"id":"6317b857c6ac2e0012db7e08"}],"metaDescription":null,"metaTitle":null,"name":"Understanding Privacy (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"understanding-privacy","slug":"understanding-privacy","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"attributes":{},"bundle":null,"categories":["61b8852bfd1fb0013d27ff6e"],"categoryId":"61b8852bfd1fb0013d27ff6e","currency":{"eur":{"price":55,"salePrice":49},"usd":{"price":55,"salePrice":49}},"dateCreated":"2022-08-02T10:15:37.559Z","dateUpdated":"2022-08-04T10:29:43.192Z","delivery":null,"description":null,"id":"62e8f94908479a0012296105","image":"https://cdn.schema.io/smashing-magazine/62eb9f95a19c1f0012040f84/43a1b6f4c469c5932936ebc52b5e9bfd","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-08-04T10:29:41.945Z","filename":null,"height":354,"id":"62eb9f95a19c1f0012040f84","length":27804,"md5":"43a1b6f4c469c5932936ebc52b5e9bfd","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62eb9f95a19c1f0012040f84/43a1b6f4c469c5932936ebc52b5e9bfd","width":331},"id":"62eb9f971aa747001b9aa73f"}],"metaDescription":null,"metaTitle":null,"name":"Web Design eBook Bundle (10 eBooks)","options":[],"price":55,"prices":{"eur":{"price":55,"salePrice":49},"usd":{"price":55,"salePrice":49}},"productType":"ebook","sale":true,"salePrice":49,"sku":"web-design-ebook-bundle-10-ebooks","slug":"web-design-e-book-bundle-10-e-books","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"attributes":{},"bundle":null,"categories":["61b8852bfd1fb0013d27ff6e"],"categoryId":"61b8852bfd1fb0013d27ff6e","currency":{"eur":{"price":59,"salePrice":49},"usd":{"price":59,"salePrice":49}},"dateCreated":"2022-08-02T10:14:48.563Z","dateUpdated":"2022-08-04T10:29:28.304Z","delivery":null,"description":null,"id":"62e8f91808479a0012296103","image":"https://cdn.schema.io/smashing-magazine/62eb9f87c81e3c00127636ee/02443c0abc9e1a4f284d2e003bdc7370","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-08-04T10:29:27.697Z","filename":null,"height":354,"id":"62eb9f87c81e3c00127636ee","length":14776,"md5":"02443c0abc9e1a4f284d2e003bdc7370","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62eb9f87c81e3c00127636ee/02443c0abc9e1a4f284d2e003bdc7370","width":330},"id":"62eb9f881aa747001b9aa73d"}],"metaDescription":null,"metaTitle":null,"name":"UX eBook Bundle (12 eBooks)","options":[],"price":59,"prices":{"eur":{"price":59,"salePrice":49},"usd":{"price":59,"salePrice":49}},"productType":"ebook","sale":true,"salePrice":49,"sku":"ux-ebook-bundle-12-ebooks","slug":"ux-e-book-bundle-12-e-books","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"attributes":{},"bundle":null,"categories":["61b8852bfd1fb0013d27ff6e"],"categoryId":"61b8852bfd1fb0013d27ff6e","currency":{"eur":{"price":485,"salePrice":99},"usd":{"price":485,"salePrice":99}},"dateCreated":"2022-08-02T10:14:15.614Z","dateUpdated":"2022-08-04T10:29:16.564Z","delivery":null,"description":null,"digitalProduct":null,"id":"62e8f8f70172ce00127f674d","image":"https://cdn.schema.io/smashing-magazine/62eb9f7ba19c1f0012040f81/5899da4b3faec3e08508b02358d89466","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-08-04T10:29:15.246Z","filename":null,"height":755,"id":"62eb9f7ba19c1f0012040f81","length":61376,"md5":"5899da4b3faec3e08508b02358d89466","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62eb9f7ba19c1f0012040f81/5899da4b3faec3e08508b02358d89466","width":650},"id":"62eb9f7c31dd5500129cc784"}],"metaDescription":null,"metaTitle":null,"name":"The Smashing Library (62 eBooks)","options":[],"price":485,"prices":{"eur":{"price":485,"salePrice":99},"usd":{"price":485,"salePrice":99}},"productType":"ebook","sale":true,"salePrice":99,"sku":"the-smashing-library","slug":"the-smashing-library-62-e-books","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"attributes":{},"bundle":null,"categories":["61b8852bfd1fb0013d27ff6e"],"categoryId":"61b8852bfd1fb0013d27ff6e","currency":{"eur":{"price":34.9,"salePrice":29},"usd":{"price":34.9,"salePrice":29}},"dateCreated":"2022-08-02T10:13:18.960Z","dateUpdated":"2022-08-04T10:29:07.083Z","delivery":null,"description":null,"id":"62e8f8be08479a0012296101","image":"https://cdn.schema.io/smashing-magazine/62eb9f721aa747001b9aa73b/24ee42330f483f8524406b3cc939c033","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-08-04T10:29:06.516Z","filename":null,"height":353,"id":"62eb9f721aa747001b9aa73b","length":17996,"md5":"24ee42330f483f8524406b3cc939c033","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62eb9f721aa747001b9aa73b/24ee42330f483f8524406b3cc939c033","width":331},"id":"62eb9f73a19c1f0012040f7a"}],"metaDescription":null,"metaTitle":null,"name":"Front-End eBook Bundle (4 eBooks)","options":[],"price":34.9,"prices":{"eur":{"price":34.9,"salePrice":29},"usd":{"price":34.9,"salePrice":29}},"productType":"ebook","sale":true,"salePrice":29,"sku":"front-end-ebook-bundle-4-ebooks","slug":"front-end-e-book-bundle-4-e-books","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"attributes":{},"bundle":null,"categories":["61b8852bfd1fb0013d27ff6e"],"categoryId":"61b8852bfd1fb0013d27ff6e","currency":{"eur":{"price":14.7,"salePrice":12},"usd":{"price":14.7,"salePrice":12}},"dateCreated":"2022-08-02T10:12:13.948Z","dateUpdated":"2022-08-04T10:28:58.213Z","delivery":null,"description":null,"id":"62e8f87de5aeb900139b5bef","image":"https://cdn.schema.io/smashing-magazine/62eb9f691aa747001b9aa736/7bbaed74138eb5d411703ef677f1b82b","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-08-04T10:28:57.230Z","filename":null,"height":353,"id":"62eb9f691aa747001b9aa736","length":17584,"md5":"7bbaed74138eb5d411703ef677f1b82b","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62eb9f691aa747001b9aa736/7bbaed74138eb5d411703ef677f1b82b","width":330},"id":"62eb9f6a1aa747001b9aa738"}],"metaDescription":null,"metaTitle":null,"name":"Content Strategy eBook Bundle (3 eBooks)","options":[],"price":14.7,"prices":{"eur":{"price":14.7,"salePrice":12},"usd":{"price":14.7,"salePrice":12}},"productType":"ebook","sale":true,"salePrice":12,"sku":"content-strategy-ebook-bundle-3-ebooks","slug":"content-strategy-e-book-bundle-3-e-books","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"attributes":{},"bundle":null,"categories":["61b8852bfd1fb0013d27ff6e"],"categoryId":"61b8852bfd1fb0013d27ff6e","currency":{"eur":{"price":67.4,"salePrice":35},"usd":{"price":67.4,"salePrice":35}},"dateCreated":"2022-08-02T10:11:26.054Z","dateUpdated":"2022-08-04T10:28:44.013Z","delivery":null,"description":null,"id":"62e8f84ee5aeb900139b5beb","image":"https://cdn.schema.io/smashing-magazine/62eb9f5b31dd5500129cc782/1eda79e778c01cd318d45e576790fa0a","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-08-04T10:28:43.397Z","filename":null,"height":353,"id":"62eb9f5b31dd5500129cc782","length":17524,"md5":"1eda79e778c01cd318d45e576790fa0a","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62eb9f5b31dd5500129cc782/1eda79e778c01cd318d45e576790fa0a","width":330},"id":"62eb9f5cc81e3c00127636eb"}],"metaDescription":null,"metaTitle":null,"name":"Business eBook Bundle (8 eBooks)","options":[],"price":67.4,"prices":{"eur":{"price":67.4,"salePrice":35},"usd":{"price":67.4,"salePrice":35}},"productType":"ebook","sale":true,"salePrice":35,"sku":"business-ebook-bundle-8-ebooks","slug":"business-e-book-bundle-8-e-books","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"attributes":{},"bundle":null,"categories":["61b8852bfd1fb0013d27ff6e"],"categoryId":"61b8852bfd1fb0013d27ff6e","currency":{"eur":{"price":42.9,"salePrice":29},"usd":{"price":42.9,"salePrice":29}},"dateCreated":"2022-08-02T10:10:09.913Z","dateUpdated":"2022-08-04T10:28:33.227Z","delivery":null,"description":null,"id":"62e8f80108479a00122960fd","image":"https://cdn.schema.io/smashing-magazine/62eb9f4f1aa747001b9aa733/095cb329dae90e507083211c20d451d0","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-08-04T10:28:31.159Z","filename":null,"height":353,"id":"62eb9f4f1aa747001b9aa733","length":13272,"md5":"095cb329dae90e507083211c20d451d0","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62eb9f4f1aa747001b9aa733/095cb329dae90e507083211c20d451d0","width":331},"id":"62eb9f5131dd5500129cc77f"}],"metaDescription":null,"metaTitle":null,"name":"Accessibility eBook Bundle (3 eBooks)","options":[],"price":42.9,"prices":{"eur":{"price":42.9,"salePrice":29},"usd":{"price":42.9,"salePrice":29}},"productType":"ebook","sale":true,"salePrice":29,"sku":"accessibility-ebook-bundle-3-ebooks","slug":"accessibility-e-book-bundle-3-e-books","stockStatus":null,"stockTracking":false,"tags":[],"type":"digital","variable":false,"virtual":true},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d180205e4272966374a1","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea94df2989946816bea202","productId":"61b8d180205e4272966374a1"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:17:03.919Z","dateUpdated":"2022-08-26T14:57:54.216Z","delivery":"shipment","description":null,"digitalProductId":"61b8d180205e4272966374a1","id":"61b8d18f205e427296637f1d","image":"https://cdn.schema.io/smashing-magazine/6223e0f78beac601328a607c/cc05e47c489a6d2bb01e4ee84b6a0633","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-05T22:15:19.811Z","filename":null,"height":698,"id":"6223e0f78beac601328a607c","length":21888,"md5":"cc05e47c489a6d2bb01e4ee84b6a0633","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6223e0f78beac601328a607c/cc05e47c489a6d2bb01e4ee84b6a0633","width":481},"id":"6223e1018beac601328a674a"}],"metaDescription":null,"metaTitle":null,"name":"White Hat UX (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"white-hat-ux-the-next-generation-in-user-experience","slug":"white-hat-ux-the-next-generation-in-user-experience-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d17d205e427296637381","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea94d02989946816bea201","productId":"61b8d17d205e427296637381"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:17:02.565Z","dateUpdated":"2022-08-26T14:57:48.499Z","delivery":"shipment","description":null,"digitalProductId":"61b8d17d205e427296637381","id":"61b8d18e205e427296637e8d","image":"https://cdn.schema.io/smashing-magazine/622531d43b71e90132a39be3/7e3a3ca06d7d2cce75e5a60fa815c80e","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:12:36.501Z","filename":null,"height":698,"id":"622531d43b71e90132a39be3","length":17692,"md5":"7e3a3ca06d7d2cce75e5a60fa815c80e","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622531d43b71e90132a39be3/7e3a3ca06d7d2cce75e5a60fa815c80e","width":481},"id":"622531e0ede30601328e161c"}],"metaDescription":null,"metaTitle":null,"name":"User Experience Revolution (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"user-experience-revolution","slug":"user-experience-revolution-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d178205e427296637034","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea94b22989946816bea1ff","productId":"61b8d178205e427296637034"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:17:01.582Z","dateUpdated":"2022-08-26T14:57:42.450Z","delivery":"shipment","description":null,"digitalProductId":"61b8d178205e427296637034","id":"61b8d18d205e427296637dfb","image":"https://cdn.schema.io/smashing-magazine/62253222852ddd01323d18c5/538f9f27f831ee896fef6ff40cd7b184","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:13:54.622Z","filename":null,"height":697,"id":"62253222852ddd01323d18c5","length":12788,"md5":"538f9f27f831ee896fef6ff40cd7b184","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253222852ddd01323d18c5/538f9f27f831ee896fef6ff40cd7b184","width":480},"id":"62253229852ddd01323d1a0a"}],"metaDescription":null,"metaTitle":null,"name":"Touch Design for Mobile Interfaces (Print)","options":[],"popularity":35,"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"touch-design-for-mobile-interfaces","slug":"touch-design-for-mobile-interfaces-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":54,"salePrice":46.5},"usd":{"price":54,"salePrice":46.5}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d176205e427296636f14","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea94a42989946816bea1fe","productId":"61b8d176205e427296636f14"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:17:00.691Z","dateUpdated":"2022-08-26T14:57:36.132Z","delivery":"shipment","description":null,"digitalProductId":"61b8d176205e427296636f14","id":"61b8d18c205e427296637d6b","image":"https://cdn.schema.io/smashing-magazine/62253272852ddd01323d27ab/e3552dd001e9e84af1c7d17e4e06e4e5","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:15:14.706Z","filename":null,"height":698,"id":"62253272852ddd01323d27ab","length":25080,"md5":"e3552dd001e9e84af1c7d17e4e06e4e5","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253272852ddd01323d27ab/e3552dd001e9e84af1c7d17e4e06e4e5","width":481},"id":"622532763b71e90132a4ab2b"}],"metaDescription":null,"metaTitle":null,"name":"The Sketch Handbook (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"sketch-handbook","slug":"sketch-handbook-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":44.5,"salePrice":27.5},"usd":{"price":44.5,"salePrice":27.5}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d174205e427296636d64","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea947f2989946816bea1fc","productId":"61b8d174205e427296636d64"}],"currency":{"eur":{"price":30,"salePrice":25},"usd":{"price":30,"salePrice":25}},"dateCreated":"2021-12-14T17:17:00.059Z","dateUpdated":"2022-08-26T14:57:29.987Z","delivery":"shipment","description":null,"digitalProductId":"61b8d174205e427296636d64","id":"61b8d18c205e427296637cdb","image":"https://cdn.schema.io/smashing-magazine/6225335e3b71e90132a63e6d/05b60181330c2c22770dc3530d0d755c","images":[{"file":{"contentType":"image/webp","dateUploaded":"2022-03-06T22:19:10.101Z","filename":null,"height":582,"id":"6225335e3b71e90132a63e6d","length":35540,"md5":"05b60181330c2c22770dc3530d0d755c","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6225335e3b71e90132a63e6d/05b60181330c2c22770dc3530d0d755c","width":400},"id":"62253366cd4f4d0133c38e25"}],"metaDescription":null,"metaTitle":null,"name":"Smashing Print #1: Ethics \\u0026 Privacy (Print)","options":[],"popularity":1,"price":30,"prices":{"eur":{"price":30,"salePrice":25},"usd":{"price":30,"salePrice":25}},"productType":"book","sale":true,"salePrice":25,"sku":"smashing-magazine-print-1","slug":"smashing-magazine-print-1-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d173205e427296636cc6","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea946a2989946816bea1fb","productId":"61b8d173205e427296636cc6"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:58.855Z","dateUpdated":"2022-08-26T14:57:24.076Z","delivery":"shipment","description":null,"digitalProductId":"61b8d173205e427296636cc6","id":"61b8d18a205e427296637c2f","image":"https://cdn.schema.io/smashing-magazine/622532b4dae66a0132a04ae1/f8d01370d369dce3ec657f671024d860","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:16:20.048Z","filename":null,"height":698,"id":"622532b4dae66a0132a04ae1","length":36368,"md5":"f8d01370d369dce3ec657f671024d860","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622532b4dae66a0132a04ae1/f8d01370d369dce3ec657f671024d860","width":481},"id":"622532b8cd4f4d0133c3605d"}],"metaDescription":null,"metaTitle":null,"name":"Smashing Book 6: New Frontiers In Web Design (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"smashing-book-6","slug":"smashing-book-6-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d173205e427296636aa2","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea94592989946816bea1f9","productId":"61b8d173205e427296636aa2"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:58.222Z","dateUpdated":"2022-08-26T14:57:17.521Z","delivery":"shipment","description":null,"digitalProductId":"61b8d173205e427296636aa2","id":"61b8d18a205e427296637b85","image":"https://cdn.schema.io/smashing-magazine/622533988beac601328a6dac/1be07af148aa981dbd462505454e7039","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:20:08.950Z","filename":null,"height":698,"id":"622533988beac601328a6dac","length":26668,"md5":"1be07af148aa981dbd462505454e7039","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622533988beac601328a6dac/1be07af148aa981dbd462505454e7039","width":481},"id":"6225339e8beac601328a7d07"}],"metaDescription":null,"metaTitle":null,"name":"Smashing Book #5 (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"smashing-book-5","slug":"smashing-book-5-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d16a205e4272966363d4","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea94292989946816bea1f7","productId":"61b8d16a205e4272966363d4"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:57.615Z","dateUpdated":"2022-08-26T14:57:10.933Z","delivery":"shipment","description":null,"digitalProductId":"61b8d16a205e4272966363d4","id":"61b8d189205e427296637af5","image":"https://cdn.schema.io/smashing-magazine/622533eaede306013290abf3/d9acc3de4801c83d3f3a5d9e74758a97","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:21:30.357Z","filename":null,"height":698,"id":"622533eaede306013290abf3","length":31232,"md5":"d9acc3de4801c83d3f3a5d9e74758a97","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622533eaede306013290abf3/d9acc3de4801c83d3f3a5d9e74758a97","width":481},"id":"622533ed3b71e90132a950aa"}],"metaDescription":null,"metaTitle":null,"name":"Inclusive Design Patterns (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"inclusive-design-patterns","slug":"inclusive-design-patterns-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:56.993Z","dateUpdated":"2022-08-26T14:57:04.846Z","delivery":"shipment","description":null,"id":"61b8d188205e427296637a65","image":"https://cdn.schema.io/smashing-magazine/622534218beac601328bc0e5/e75b002fbe9416ed104b1236fcf493aa","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:22:25.126Z","filename":null,"height":697,"id":"622534218beac601328bc0e5","length":14832,"md5":"e75b002fbe9416ed104b1236fcf493aa","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622534218beac601328bc0e5/e75b002fbe9416ed104b1236fcf493aa","width":480},"id":"62253424cd4f4d0133c52e95"}],"metaDescription":null,"metaTitle":null,"name":"Inclusive Components (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"inclusive-components","slug":"inclusive-components-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d169205e427296636344","crossSells":[{"discountPercent":75,"discountType":"percent","id":"62ea94052989946816bea1f4","productId":"61b8d169205e427296636344"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:55.740Z","dateUpdated":"2022-08-26T14:56:57.263Z","delivery":"shipment","description":null,"digitalProductId":"61b8d169205e427296636344","id":"61b8d187205e4272966379d5","image":"https://cdn.schema.io/smashing-magazine/62253450dae66a0132a1301b/6f50ad547cb97062efc6bc71e1ec05c4","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:23:12.853Z","filename":null,"height":697,"id":"62253450dae66a0132a1301b","length":11736,"md5":"6f50ad547cb97062efc6bc71e1ec05c4","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253450dae66a0132a1301b/6f50ad547cb97062efc6bc71e1ec05c4","width":480},"id":"62253455dae66a0132a130d4"}],"metaDescription":null,"metaTitle":null,"name":"Image Optimization (Print)","options":[],"popularity":3,"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"image-optimization","slug":"image-optimization-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d167205e427296636194","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea93f02989946816bea1f3","productId":"61b8d167205e427296636194"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:55.020Z","dateUpdated":"2022-08-26T14:56:50.169Z","delivery":"shipment","description":null,"digitalProductId":"61b8d167205e427296636194","id":"61b8d186205e427296637945","image":"https://cdn.schema.io/smashing-magazine/62253477ede306013291a8ce/babdd73fb7d754244f95c964b493dfa6","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:23:51.653Z","filename":null,"height":698,"id":"62253477ede306013291a8ce","length":22624,"md5":"babdd73fb7d754244f95c964b493dfa6","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253477ede306013291a8ce/babdd73fb7d754244f95c964b493dfa6","width":481},"id":"6225347a3b71e90132a9ba88"}],"metaDescription":null,"metaTitle":null,"name":"Form Design Patterns (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"form-design-patterns","slug":"form-design-patterns-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d166205e427296636104","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea94902989946816bea1fd","productId":"61b8d166205e427296636104"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:54.420Z","dateUpdated":"2022-08-26T14:56:40.224Z","delivery":"shipment","description":null,"digitalProductId":"61b8d166205e427296636104","id":"61b8d186205e427296637891","image":"https://cdn.schema.io/smashing-magazine/622534aecd4f4d0133c63ae6/e9631e79be394a6c44f3a80ccb882c68","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:24:46.871Z","filename":null,"height":697,"id":"622534aecd4f4d0133c63ae6","length":169404,"md5":"e9631e79be394a6c44f3a80ccb882c68","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622534aecd4f4d0133c63ae6/e9631e79be394a6c44f3a80ccb882c68","width":480},"id":"622534b43b71e90132a9e25f"}],"metaDescription":null,"metaTitle":null,"name":"The Ethical Design Handbook (Print)","options":[],"popularity":2,"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"ethical-design-handbook","slug":"ethical-design-handbook-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d163205e427296635f54","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea93d72989946816bea1f1","productId":"61b8d163205e427296635f54"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:53.817Z","dateUpdated":"2022-08-26T14:56:32.501Z","delivery":"shipment","description":null,"digitalProductId":"61b8d163205e427296635f54","id":"61b8d185205e427296637801","image":"https://cdn.schema.io/smashing-magazine/622534d8ede3060132934116/bb597074d7bd34c9c5added311a67086","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:25:28.458Z","filename":null,"height":698,"id":"622534d8ede3060132934116","length":42908,"md5":"bb597074d7bd34c9c5added311a67086","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622534d8ede3060132934116/bb597074d7bd34c9c5added311a67086","width":481},"id":"622534dd3b71e90132a9f096"}],"metaDescription":null,"metaTitle":null,"name":"Digital Adaptation (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"digital-adaptation","slug":"digital-adaptation-book-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d161205e427296635d9c","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea93c42989946816bea1f0","productId":"61b8d161205e427296635d9c"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:53.116Z","dateUpdated":"2022-08-26T14:56:24.856Z","delivery":"shipment","description":null,"digitalProductId":"61b8d161205e427296635d9c","id":"61b8d185205e427296637771","image":"https://cdn.schema.io/smashing-magazine/6223e1bacd4f4d0133d6a5e3/541b210dd963a16956d4fbabd19afb15","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-05T22:18:34.646Z","filename":null,"height":698,"id":"6223e1bacd4f4d0133d6a5e3","length":77372,"md5":"541b210dd963a16956d4fbabd19afb15","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6223e1bacd4f4d0133d6a5e3/541b210dd963a16956d4fbabd19afb15","width":481},"id":"6223e1be852ddd01320e0304"}],"metaDescription":null,"metaTitle":null,"name":"Design Systems (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"design-systems-by-alla-kholmatova","slug":"design-systems-by-alla-kholmatova-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d15c205e427296635972","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea93ae2989946816bea1ee","productId":"61b8d15c205e427296635972"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:51.765Z","dateUpdated":"2022-08-26T14:56:07.053Z","delivery":"shipment","description":null,"digitalProductId":"61b8d15c205e427296635972","id":"61b8d183205e4272966376e1","image":"https://cdn.schema.io/smashing-magazine/62253518dae66a0132a20fb3/70e46ceb6cfdc4a4d0833551f2dd0cfa","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:26:32.047Z","filename":null,"height":697,"id":"62253518dae66a0132a20fb3","length":116156,"md5":"70e46ceb6cfdc4a4d0833551f2dd0cfa","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253518dae66a0132a20fb3/70e46ceb6cfdc4a4d0833551f2dd0cfa","width":480},"id":"6225351bdae66a0132a21003"}],"metaDescription":null,"metaTitle":null,"name":"Click! How to Encourage Clicks Without Shady Tricks (Print)","options":[],"popularity":3,"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"click","slug":"click-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":65,"salePrice":42.5},"usd":{"price":65,"salePrice":42.5}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d15b205e4272966358c2","crossSells":[{"currency":{"eur":{"discountAmount":null},"usd":{"discountAmount":""}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea944a2989946816bea1f8","productId":"61b8d15b205e4272966358c2"}],"currency":{"eur":{"price":35,"salePrice":null},"usd":{"price":35,"salePrice":null}},"dateCreated":"2021-12-14T17:16:50.990Z","dateUpdated":"2022-09-22T13:12:37.013Z","delivery":"shipment","description":null,"digitalProductId":"61b8d15b205e4272966358c2","id":"61b8d182205e427296637651","image":"https://cdn.schema.io/smashing-magazine/6225354aede3060132940f06/e7b12874dfcae90fc6fc50303eb3eb0d","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:27:22.630Z","filename":null,"height":697,"id":"6225354aede3060132940f06","length":96440,"md5":"e7b12874dfcae90fc6fc50303eb3eb0d","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6225354aede3060132940f06/e7b12874dfcae90fc6fc50303eb3eb0d","width":480},"id":"6225354f3b71e90132aa17bc"}],"metaDescription":null,"metaTitle":null,"name":"Smart Interface Design Patterns Checklists (Print)","options":[],"popularity":2,"price":35,"prices":{"eur":{"price":35,"salePrice":null},"usd":{"price":35,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"checklist-cards","slug":"checklist-cards-book","stockLevel":-2,"stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"crossSellProductId":"61b8d15a205e4272966357a2","crossSells":[{"discountPercent":75,"discountType":"percent","id":"62ea8655b43134ac6c5cc1e2","productId":"61b8d15a205e4272966357a2"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-12-14T17:16:49.998Z","dateUpdated":"2022-08-26T14:55:59.502Z","delivery":"shipment","description":null,"digitalProductId":"61b8d15a205e4272966357a2","dimensions":null,"id":"61b8d181205e4272966375c1","image":"https://cdn.schema.io/smashing-magazine/6225358eede3060132948e1d/4dadc481dd2962191349d62a553f9398","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:28:30.100Z","filename":null,"height":700,"id":"6225358eede3060132948e1d","length":165364,"md5":"4dadc481dd2962191349d62a553f9398","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6225358eede3060132948e1d/4dadc481dd2962191349d62a553f9398","width":481},"id":"62253592cd4f4d0133c70567"}],"metaDescription":null,"metaTitle":null,"name":"Art Direction for the Web (Print)","options":[],"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"shipmentDimensions":null,"shipmentPackageQuantity":null,"shipmentPrices":[],"shipmentWeight":null,"sku":"art-direction-for-the-web","slug":"art-direction-for-the-web-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:49.036Z","dateUpdated":"2022-08-03T15:47:09.103Z","delivery":"shipment","description":null,"id":"61b8d180205e427296637531","image":"https://cdn.schema.io/smashing-magazine/622535e38c7bad01329d36e3/a44563d7450f19f4145e578833d84a86","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:29:55.158Z","filename":null,"height":365,"id":"622535e38c7bad01329d36e3","length":17044,"md5":"a44563d7450f19f4145e578833d84a86","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622535e38c7bad01329d36e3/a44563d7450f19f4145e578833d84a86","width":342},"id":"622535e78c7bad01329d37d1"}],"metaDescription":null,"metaTitle":null,"name":"Work Smart, Live Healthy (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"work-smart-live-healthy","slug":"work-smart-live-healthy","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:48.428Z","dateUpdated":"2022-09-09T12:43:04.319Z","delivery":"shipment","description":null,"id":"61b8d180205e4272966374a1","image":"https://cdn.schema.io/smashing-magazine/6223e10cede30601327cf526/cc05e47c489a6d2bb01e4ee84b6a0633","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-05T22:15:40.373Z","filename":null,"height":698,"id":"6223e10cede30601327cf526","length":21888,"md5":"cc05e47c489a6d2bb01e4ee84b6a0633","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6223e10cede30601327cf526/cc05e47c489a6d2bb01e4ee84b6a0633","width":481},"id":"6223e1113b71e90132888275"}],"metaDescription":null,"metaTitle":null,"name":"White Hat UX (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"white-hat-ux-the-next-ebook","slug":"white-hat-ux-the-next-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:46.844Z","dateUpdated":"2022-08-03T15:46:30.651Z","delivery":"shipment","description":null,"id":"61b8d17e205e427296637411","image":"https://cdn.schema.io/smashing-magazine/6226748d93cebd0132416425/7641e9a710d985551786a80cb8236383","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:09:33.330Z","filename":null,"height":365,"id":"6226748d93cebd0132416425","length":63988,"md5":"7641e9a710d985551786a80cb8236383","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226748d93cebd0132416425/7641e9a710d985551786a80cb8236383","width":342},"id":"6226749104eaa6013214c39b"}],"metaDescription":null,"metaTitle":null,"name":"UX Design Process (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-41-ux-design-process","slug":"smashing-ebook-41-ux-design-process","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:45.907Z","dateUpdated":"2022-08-03T15:46:49.940Z","delivery":"shipment","description":null,"id":"61b8d17d205e427296637381","image":"https://cdn.schema.io/smashing-magazine/622531d08c7bad013298012c/7e3a3ca06d7d2cce75e5a60fa815c80e","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:12:32.941Z","filename":null,"height":698,"id":"622531d08c7bad013298012c","length":17692,"md5":"7e3a3ca06d7d2cce75e5a60fa815c80e","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622531d08c7bad013298012c/7e3a3ca06d7d2cce75e5a60fa815c80e","width":481},"id":"622531dcede30601328e14d2"}],"metaDescription":null,"metaTitle":null,"name":"User Experience Revolution (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"user-experience-revolution-ebook","slug":"user-experience-revolution-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:44.402Z","dateUpdated":"2022-08-03T15:46:43.999Z","delivery":"shipment","description":null,"id":"61b8d17c205e4272966372ba","image":"https://cdn.schema.io/smashing-magazine/6226744304eaa601321494c4/772a2144435efa0250c7d5411b9d0db4","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:08:19.282Z","filename":null,"height":365,"id":"6226744304eaa601321494c4","length":65176,"md5":"772a2144435efa0250c7d5411b9d0db4","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226744304eaa601321494c4/772a2144435efa0250c7d5411b9d0db4","width":342},"id":"62267447ce2a060132685407"}],"metaDescription":null,"metaTitle":null,"name":"User Experience Design (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"user-experience-design-1","slug":"user-experience-design-1","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:43.370Z","dateUpdated":"2022-08-03T15:46:38.679Z","delivery":"shipment","description":null,"id":"61b8d17b205e4272966371e6","image":"https://cdn.schema.io/smashing-magazine/62267916da820101324a62c0/c4ab6e3aa99bb74b1d5f6aabaf38432f","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:28:54.452Z","filename":null,"height":365,"id":"62267916da820101324a62c0","length":12772,"md5":"c4ab6e3aa99bb74b1d5f6aabaf38432f","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267916da820101324a62c0/c4ab6e3aa99bb74b1d5f6aabaf38432f","width":342},"id":"62267919e347cb01339920c3"}],"metaDescription":null,"metaTitle":null,"name":"Unlocking Innovation: How To Generate And Realize Great Ideas (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"unlocking-innovation-how-to-generate-and-realize-great-ideas","slug":"unlocking-innovation-how-to-generate-and-realize-great-ideas","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:42.222Z","dateUpdated":"2022-08-03T15:46:15.900Z","delivery":"shipment","description":null,"id":"61b8d17a205e427296637156","image":"https://cdn.schema.io/smashing-magazine/62267928ea492101324b065a/a5c41b26db073f3d145720d0d01c3931","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:29:12.075Z","filename":null,"height":365,"id":"62267928ea492101324b065a","length":20140,"md5":"a5c41b26db073f3d145720d0d01c3931","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267928ea492101324b065a/a5c41b26db073f3d145720d0d01c3931","width":342},"id":"6226792b7f83c10133622f5e"}],"metaDescription":null,"metaTitle":null,"name":"Typography: Practical Considerations And Design Patterns (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"typography-practical-considerations-and-design-patterns","slug":"typography-practical-considerations-and-design-patterns","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:41.609Z","dateUpdated":"2022-08-03T15:46:09.950Z","delivery":"shipment","description":null,"id":"61b8d179205e4272966370c6","image":"https://cdn.schema.io/smashing-magazine/622679377f83c10133623a79/ec1ab22823b1dd29b02f23e7996b6138","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:29:27.076Z","filename":null,"height":365,"id":"622679377f83c10133623a79","length":61720,"md5":"ec1ab22823b1dd29b02f23e7996b6138","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622679377f83c10133623a79/ec1ab22823b1dd29b02f23e7996b6138","width":342},"id":"6226793aea492101324b2595"}],"metaDescription":null,"metaTitle":null,"name":"Typography Best Practices (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-typography-best-practices","slug":"smashing-ebook-typography-best-practices","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:40.440Z","dateUpdated":"2022-08-19T05:57:58.271Z","delivery":"shipment","description":null,"id":"61b8d178205e427296637034","image":"https://cdn.schema.io/smashing-magazine/6225321f852ddd01323d18a9/538f9f27f831ee896fef6ff40cd7b184","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:13:51.968Z","filename":null,"height":697,"id":"6225321f852ddd01323d18a9","length":12788,"md5":"538f9f27f831ee896fef6ff40cd7b184","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6225321f852ddd01323d18a9/538f9f27f831ee896fef6ff40cd7b184","width":480},"id":"62253226cd4f4d0133c305bd"}],"metaDescription":null,"metaTitle":null,"name":"Touch Design for Mobile Interfaces (eBook)","options":[],"popularity":39,"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"touch-design-for-mobile-interfaces-ebook","slug":"touch-design-for-mobile-interfaces-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":10,"salePrice":null},"usd":{"price":10,"salePrice":null}},"dateCreated":"2021-12-14T17:16:39.217Z","dateUpdated":"2022-08-03T15:45:44.025Z","delivery":"shipment","description":null,"id":"61b8d177205e427296636fa4","image":"https://cdn.schema.io/smashing-magazine/6226796704eaa601321ca73d/f4ca777bdcb1a228ec6be6f3d3421c36","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:30:15.771Z","filename":null,"height":401,"id":"6226796704eaa601321ca73d","length":46872,"md5":"f4ca777bdcb1a228ec6be6f3d3421c36","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226796704eaa601321ca73d/f4ca777bdcb1a228ec6be6f3d3421c36","width":342},"id":"6226796fea492101324b78ad"}],"metaDescription":null,"metaTitle":null,"name":"The WebP Manual (eBook)","options":[],"price":10,"prices":{"eur":{"price":10,"salePrice":null},"usd":{"price":10,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"the-webp-manual","slug":"the-webp-manual","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":10,"salePrice":null},"usd":{"price":10,"salePrice":null}},"dateCreated":"2021-12-14T17:16:38.632Z","dateUpdated":"2022-08-03T15:45:35.216Z","delivery":"shipment","description":null,"id":"61b8d176205e427296636f14","image":"https://cdn.schema.io/smashing-magazine/6225326e852ddd01323d270c/e3552dd001e9e84af1c7d17e4e06e4e5","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:15:10.353Z","filename":null,"height":698,"id":"6225326e852ddd01323d270c","length":25080,"md5":"e3552dd001e9e84af1c7d17e4e06e4e5","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6225326e852ddd01323d270c/e3552dd001e9e84af1c7d17e4e06e4e5","width":481},"id":"62253277cd4f4d0133c3288e"}],"metaDescription":null,"metaTitle":null,"name":"The Sketch Handbook (eBook)","options":[],"price":10,"prices":{"eur":{"price":10,"salePrice":null},"usd":{"price":10,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"sketch-handbook-ebook","slug":"sketch-handbook-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":10,"salePrice":null},"usd":{"price":10,"salePrice":null}},"dateCreated":"2021-12-14T17:16:38.046Z","dateUpdated":"2022-08-03T15:45:26.299Z","delivery":"shipment","description":null,"id":"61b8d175205e427296636e84","image":"https://cdn.schema.io/smashing-magazine/622676aaea49210132444dd8/da6118f96f6b9bce0a8bd169b4e7fc20","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:18:34.948Z","filename":null,"height":365,"id":"622676aaea49210132444dd8","length":53024,"md5":"da6118f96f6b9bce0a8bd169b4e7fc20","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622676aaea49210132444dd8/da6118f96f6b9bce0a8bd169b4e7fc20","width":342},"id":"622676b293cebd0132440a77"}],"metaDescription":null,"metaTitle":null,"name":"The New Hardboiled Web Design (eBook)","options":[],"price":10,"prices":{"eur":{"price":10,"salePrice":null},"usd":{"price":10,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"hardboiled-web-design-ebook","slug":"hardboiled-web-design-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:36.863Z","dateUpdated":"2022-08-03T15:45:09.678Z","delivery":"shipment","description":null,"id":"61b8d174205e427296636df4","image":"https://cdn.schema.io/smashing-magazine/6226789304eaa601321ba515/f91d3425654079e833dfec2be3caeccd","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:26:43.446Z","filename":null,"height":365,"id":"6226789304eaa601321ba515","length":54428,"md5":"f91d3425654079e833dfec2be3caeccd","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226789304eaa601321ba515/f91d3425654079e833dfec2be3caeccd","width":342},"id":"62267897ea4921013249e474"}],"metaDescription":null,"metaTitle":null,"name":"Successful Freelancing For Web Designers (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"successful-freelancing-1","slug":"successful-freelancing-1","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":14.5,"salePrice":10},"usd":{"price":14.5,"salePrice":10}},"dateCreated":"2021-12-14T17:16:36.277Z","dateUpdated":"2022-08-03T15:45:00.598Z","delivery":"shipment","description":null,"id":"61b8d174205e427296636d64","image":"https://cdn.schema.io/smashing-magazine/6225335adae66a0132a0aa5f/05b60181330c2c22770dc3530d0d755c","images":[{"file":{"contentType":"image/webp","dateUploaded":"2022-03-06T22:19:06.456Z","filename":null,"height":582,"id":"6225335adae66a0132a0aa5f","length":35540,"md5":"05b60181330c2c22770dc3530d0d755c","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6225335adae66a0132a0aa5f/05b60181330c2c22770dc3530d0d755c","width":400},"id":"62253363ede30601328f29e5"}],"metaDescription":null,"metaTitle":null,"name":"Smashing Print #1: Ethics \\u0026 Privacy (eBook)","options":[],"price":14.5,"prices":{"eur":{"price":14.5,"salePrice":10},"usd":{"price":14.5,"salePrice":10}},"productType":"ebook","sale":true,"salePrice":10,"sku":"smashing-magazine-print-1-ebook","slug":"smashing-magazine-print-1-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:35.694Z","dateUpdated":"2022-08-03T15:44:27.988Z","delivery":"shipment","description":null,"id":"61b8d173205e427296636cc6","image":"https://cdn.schema.io/smashing-magazine/622532d7cd4f4d0133c36716/f8d01370d369dce3ec657f671024d860","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:16:55.734Z","filename":null,"height":698,"id":"622532d7cd4f4d0133c36716","length":36368,"md5":"f8d01370d369dce3ec657f671024d860","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622532d7cd4f4d0133c36716/f8d01370d369dce3ec657f671024d860","width":481},"id":"622532df8c7bad01329891fc"}],"metaDescription":null,"metaTitle":null,"name":"Smashing Book 6: New Frontiers In Web Design (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-book-6-new-frontiers-in-web-design-ebook","slug":"smashing-book-6-new-frontiers-in-web-design-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:35.093Z","dateUpdated":"2022-08-03T15:44:18.145Z","delivery":"shipment","description":null,"id":"61b8d173205e427296636aa2","image":"https://cdn.schema.io/smashing-magazine/62253395852ddd01323db8f3/1be07af148aa981dbd462505454e7039","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:20:05.895Z","filename":null,"height":698,"id":"62253395852ddd01323db8f3","length":26668,"md5":"1be07af148aa981dbd462505454e7039","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253395852ddd01323db8f3/1be07af148aa981dbd462505454e7039","width":481},"id":"622533a0852ddd01323db972"}],"metaDescription":null,"metaTitle":null,"name":"Smashing Book #5: Real-Life Responsive Web Design (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-book-5-ebook","slug":"smashing-book-5-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:34.502Z","dateUpdated":"2022-08-03T15:43:57.379Z","delivery":"shipment","description":null,"id":"61b8d172205e427296636a04","image":"https://cdn.schema.io/smashing-magazine/622674a993cebd0132419cd2/d1b7cf5d62fe8df7ca22e591cbf69859","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:10:01.448Z","filename":null,"height":365,"id":"622674a993cebd0132419cd2","length":70892,"md5":"d1b7cf5d62fe8df7ca22e591cbf69859","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622674a993cebd0132419cd2/d1b7cf5d62fe8df7ca22e591cbf69859","width":342},"id":"622674af7f83c101335ad05e"}],"metaDescription":null,"metaTitle":null,"name":"Rethinking UX (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-rethinking-ux","slug":"smashing-ebook-rethinking-ux","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:33.719Z","dateUpdated":"2022-08-03T15:43:49.752Z","delivery":"shipment","description":null,"id":"61b8d171205e427296636974","image":"https://cdn.schema.io/smashing-magazine/62267539ce2a060132696b50/bce0af8a5f3e3fb2d1d302b8600ab78f","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:12:25.290Z","filename":null,"height":365,"id":"62267539ce2a060132696b50","length":53360,"md5":"bce0af8a5f3e3fb2d1d302b8600ab78f","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267539ce2a060132696b50/bce0af8a5f3e3fb2d1d302b8600ab78f","width":342},"id":"6226753dda8201013241c3c1"}],"metaDescription":null,"metaTitle":null,"name":"Psychology Of Web Design (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"psychology-of-web-design-1","slug":"psychology-of-web-design-1","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:33.124Z","dateUpdated":"2022-08-03T15:43:36.124Z","delivery":"shipment","description":null,"id":"61b8d171205e4272966368e4","image":"https://cdn.schema.io/smashing-magazine/622674f2da820101324172ff/f7433e9825a6421a199477ea0af1d48f","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:11:14.657Z","filename":null,"height":365,"id":"622674f2da820101324172ff","length":29676,"md5":"f7433e9825a6421a199477ea0af1d48f","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622674f2da820101324172ff/f7433e9825a6421a199477ea0af1d48f","width":342},"id":"622674f6da82010132417546"}],"metaDescription":null,"metaTitle":null,"name":"Practical Approaches For Designing Usable Websites (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"designing-usable-websites-1","slug":"designing-usable-websites-1","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:31.733Z","dateUpdated":"2022-08-03T15:43:43.180Z","delivery":"shipment","description":null,"id":"61b8d16f205e427296636854","image":"https://cdn.schema.io/smashing-magazine/622678edce2a0601327b1fb1/fd33f00d9b0b49fdb944c74a021a75ed","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:28:13.481Z","filename":null,"height":365,"id":"622678edce2a0601327b1fb1","length":21636,"md5":"fd33f00d9b0b49fdb944c74a021a75ed","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622678edce2a0601327b1fb1/fd33f00d9b0b49fdb944c74a021a75ed","width":342},"id":"622678f0da8201013249f129"}],"metaDescription":null,"metaTitle":null,"name":"Practical Approaches For Designing Accessible Websites (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"practical-approaches-for-designing-accessible-websites","slug":"practical-approaches-for-designing-accessible-websites","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:31.172Z","dateUpdated":"2022-08-03T15:43:28.433Z","delivery":"shipment","description":null,"id":"61b8d16f205e4272966367c4","image":"https://cdn.schema.io/smashing-magazine/622676d793cebd013244668f/ae47108e3676b8817f7e34c9d96df0ec","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:19:19.770Z","filename":null,"height":365,"id":"622676d793cebd013244668f","length":16036,"md5":"ae47108e3676b8817f7e34c9d96df0ec","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622676d793cebd013244668f/ae47108e3676b8817f7e34c9d96df0ec","width":342},"id":"622676db7f83c101335cd68a"}],"metaDescription":null,"metaTitle":null,"name":"Performance Optimization: Techniques And Strategies (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"performance-optimization-techniques-and-strategies","slug":"performance-optimization-techniques-and-strategies","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:30.608Z","dateUpdated":"2022-08-03T15:42:52.608Z","delivery":"shipment","description":null,"id":"61b8d16e205e427296636734","image":"https://cdn.schema.io/smashing-magazine/6226756593cebd013242a4e4/5f2eb02951b63d8ff4173467a09179c5","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:13:09.149Z","filename":null,"height":365,"id":"6226756593cebd013242a4e4","length":63820,"md5":"5f2eb02951b63d8ff4173467a09179c5","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226756593cebd013242a4e4/5f2eb02951b63d8ff4173467a09179c5","width":342},"id":"6226756993cebd013242a509"}],"metaDescription":null,"metaTitle":null,"name":"Navigation \\u0026 Interaction (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-39-navigation-and-interaction","slug":"smashing-ebook-39-navigation-and-interaction","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:30.052Z","dateUpdated":"2022-08-03T15:43:19.581Z","delivery":"shipment","description":null,"id":"61b8d16d205e4272966366a4","image":"https://cdn.schema.io/smashing-magazine/622675787f83c101335b66c1/039b26d775f64d0eeae5368d53216543","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:13:28.045Z","filename":null,"height":365,"id":"622675787f83c101335b66c1","length":16728,"md5":"039b26d775f64d0eeae5368d53216543","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622675787f83c101335b66c1/039b26d775f64d0eeae5368d53216543","width":365},"id":"6226757c04eaa6013215896f"}],"metaDescription":null,"metaTitle":null,"name":"Navigation \\u0026 Interaction, Vol. 2 (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"navigation-and-interaction-vol-2","slug":"navigation-and-interaction-vol-2","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:29.496Z","dateUpdated":"2022-08-03T15:43:01.096Z","delivery":"shipment","description":null,"id":"61b8d16d205e427296636614","image":"https://cdn.schema.io/smashing-magazine/6226784f7f83c1013360eef3/75c520df14b5939599505cf74877f9e2","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:25:35.025Z","filename":null,"height":365,"id":"6226784f7f83c1013360eef3","length":32468,"md5":"75c520df14b5939599505cf74877f9e2","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226784f7f83c1013360eef3/75c520df14b5939599505cf74877f9e2","width":342},"id":"622678527f83c1013360efa8"}],"metaDescription":null,"metaTitle":null,"name":"Marketing Secrets For Web Designers (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-marketing-secrets-for-web-designers","slug":"smashing-ebook-marketing-secrets-for-web-designers","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:28.041Z","dateUpdated":"2022-08-03T15:42:44.781Z","delivery":"shipment","description":null,"id":"61b8d16b205e427296636584","image":"https://cdn.schema.io/smashing-magazine/62267838ce2a06013278aa0b/5cb03e2ed8a33465e83e0786e7cfca9a","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:25:12.748Z","filename":null,"height":365,"id":"62267838ce2a06013278aa0b","length":29296,"md5":"5cb03e2ed8a33465e83e0786e7cfca9a","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267838ce2a06013278aa0b/5cb03e2ed8a33465e83e0786e7cfca9a","width":342},"id":"622678407f83c1013360e9bf"}],"metaDescription":null,"metaTitle":null,"name":"Making It Right: Product Management For A Startup World (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"making-it-right-product-management-for-a-startup-world","slug":"making-it-right-product-management-for-a-startup-world","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:27.486Z","dateUpdated":"2022-08-03T15:42:36.360Z","delivery":"shipment","description":null,"id":"61b8d16b205e4272966364f4","image":"https://cdn.schema.io/smashing-magazine/62267990ea492101324b936d/263273db04d78e9a794b6a9692d77e93","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:30:56.302Z","filename":null,"height":365,"id":"62267990ea492101324b936d","length":83568,"md5":"263273db04d78e9a794b6a9692d77e93","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267990ea492101324b936d/263273db04d78e9a794b6a9692d77e93","width":342},"id":"62267994ea492101324b9537"}],"metaDescription":null,"metaTitle":null,"name":"Legacy Of Typography (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-legacy-of-typography","slug":"smashing-ebook-legacy-of-typography","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:26.942Z","dateUpdated":"2022-08-03T15:42:29.687Z","delivery":"shipment","description":null,"id":"61b8d16a205e427296636464","image":"https://cdn.schema.io/smashing-magazine/622679a1ea492101324b9cc2/fb40ac80ced2ee4735801adb2586d8e5","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:31:13.244Z","filename":null,"height":365,"id":"622679a1ea492101324b9cc2","length":19920,"md5":"fb40ac80ced2ee4735801adb2586d8e5","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622679a1ea492101324b9cc2/fb40ac80ced2ee4735801adb2586d8e5","width":342},"id":"622679a5e347cb01339a2ebe"}],"metaDescription":null,"metaTitle":null,"name":"Inside Creative Minds: Workflows, Habits And Strategies (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"inside-creative-minds-workflows-habits-and-strategies","slug":"inside-creative-minds-workflows-habits-and-strategies","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:26.352Z","dateUpdated":"2022-08-03T15:42:16.495Z","delivery":"shipment","description":null,"id":"61b8d16a205e4272966363d4","image":"https://cdn.schema.io/smashing-magazine/622533e7dae66a0132a0f0bd/d9acc3de4801c83d3f3a5d9e74758a97","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:21:27.493Z","filename":null,"height":698,"id":"622533e7dae66a0132a0f0bd","length":31232,"md5":"d9acc3de4801c83d3f3a5d9e74758a97","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622533e7dae66a0132a0f0bd/d9acc3de4801c83d3f3a5d9e74758a97","width":481},"id":"622533ef852ddd01323e457a"}],"metaDescription":null,"metaTitle":null,"name":"Inclusive Design Patterns (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"inclusive-design-patterns-ebook","slug":"inclusive-design-patterns-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:25.806Z","dateUpdated":"2022-08-19T05:55:15.940Z","delivery":"shipment","description":null,"id":"61b8d169205e427296636344","image":"https://cdn.schema.io/smashing-magazine/6225344d3b71e90132a9a2ba/6f50ad547cb97062efc6bc71e1ec05c4","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:23:09.782Z","filename":null,"height":697,"id":"6225344d3b71e90132a9a2ba","length":11736,"md5":"6f50ad547cb97062efc6bc71e1ec05c4","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6225344d3b71e90132a9a2ba/6f50ad547cb97062efc6bc71e1ec05c4","width":480},"id":"622534543b71e90132a9ad81"}],"metaDescription":null,"metaTitle":null,"name":"Image Optimization (eBook)","options":[],"popularity":2,"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"image-optimization-ebook","slug":"image-optimization-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:25.252Z","dateUpdated":"2022-08-03T15:41:40.945Z","delivery":"shipment","description":null,"id":"61b8d169205e4272966362ac","image":"https://cdn.schema.io/smashing-magazine/622676c204eaa60132175058/61fb35bedfdcf97f1c99003509855dcf","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:18:58.855Z","filename":null,"height":365,"id":"622676c204eaa60132175058","length":71560,"md5":"61fb35bedfdcf97f1c99003509855dcf","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622676c204eaa60132175058/61fb35bedfdcf97f1c99003509855dcf","width":342},"id":"622676c8da8201013244394d"}],"metaDescription":null,"metaTitle":null,"name":"HTML Semantics (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"html-semantics","slug":"html-semantics","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:24.712Z","dateUpdated":"2022-08-03T15:41:52.266Z","delivery":"shipment","description":null,"id":"61b8d168205e427296636224","image":"https://cdn.schema.io/smashing-magazine/6226758f7f83c101335b6fb8/3a3314cc0fde87399935de3dc3c963c3","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:13:51.721Z","filename":null,"height":365,"id":"6226758f7f83c101335b6fb8","length":69324,"md5":"3a3314cc0fde87399935de3dc3c963c3","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226758f7f83c101335b6fb8/3a3314cc0fde87399935de3dc3c963c3","width":342},"id":"6226759204eaa6013215ac91"}],"metaDescription":null,"metaTitle":null,"name":"How To Create Selling E-Commerce Websites, Vol. 2 (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"how-to-create-selling-e-commerce-websites-vol-2","slug":"how-to-create-selling-e-commerce-websites-vol-2","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:23.379Z","dateUpdated":"2022-08-03T15:41:30.493Z","delivery":"shipment","description":null,"id":"61b8d167205e427296636194","image":"https://cdn.schema.io/smashing-magazine/62253470cd4f4d0133c56de2/babdd73fb7d754244f95c964b493dfa6","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:23:44.728Z","filename":null,"height":698,"id":"62253470cd4f4d0133c56de2","length":22624,"md5":"babdd73fb7d754244f95c964b493dfa6","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253470cd4f4d0133c56de2/babdd73fb7d754244f95c964b493dfa6","width":481},"id":"6225347c852ddd01323e8dcf"}],"metaDescription":null,"metaTitle":null,"name":"Form Design Patterns (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"form-design-patterns-ebook","slug":"form-design-patterns-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:22.327Z","dateUpdated":"2022-08-19T05:55:15.941Z","delivery":"shipment","description":null,"id":"61b8d166205e427296636104","image":"https://cdn.schema.io/smashing-magazine/622534acede3060132929635/e9631e79be394a6c44f3a80ccb882c68","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:24:44.839Z","filename":null,"height":697,"id":"622534acede3060132929635","length":169404,"md5":"e9631e79be394a6c44f3a80ccb882c68","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622534acede3060132929635/e9631e79be394a6c44f3a80ccb882c68","width":480},"id":"622534b7cd4f4d0133c63b0b"}],"metaDescription":null,"metaTitle":null,"name":"The Ethical Design Handbook (eBook)","options":[],"popularity":1,"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"ethical-design-handbook-ebook","slug":"ethical-design-handbook-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:20.893Z","dateUpdated":"2022-08-03T15:41:21.925Z","delivery":"shipment","description":null,"id":"61b8d164205e427296636074","image":"https://cdn.schema.io/smashing-magazine/62267553da8201013241c569/6c89717d0271176bf4fbdbd3b5673f9c","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:12:51.189Z","filename":null,"height":365,"id":"62267553da8201013241c569","length":64296,"md5":"6c89717d0271176bf4fbdbd3b5673f9c","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267553da8201013241c569/6c89717d0271176bf4fbdbd3b5673f9c","width":342},"id":"6226755793cebd01324293a2"}],"metaDescription":null,"metaTitle":null,"name":"Emotional Design Elements (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-40-emotional-design-elements","slug":"smashing-ebook-40-emotional-design-elements","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:20.240Z","dateUpdated":"2022-08-03T15:41:13.283Z","delivery":"shipment","description":null,"id":"61b8d164205e427296635fdc","image":"https://cdn.schema.io/smashing-magazine/6226771c04eaa6013217d5fc/a47eea7bd194a70d6e3b8ea02791b485","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:20:28.544Z","filename":null,"height":365,"id":"6226771c04eaa6013217d5fc","length":63848,"md5":"a47eea7bd194a70d6e3b8ea02791b485","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226771c04eaa6013217d5fc/a47eea7bd194a70d6e3b8ea02791b485","width":342},"id":"62267721ce2a060132710dae"}],"metaDescription":null,"metaTitle":null,"name":"Effective Copywriting (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-effective-copywriting","slug":"smashing-ebook-effective-copywriting","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:19.693Z","dateUpdated":"2022-08-03T15:41:01.414Z","delivery":"shipment","description":null,"id":"61b8d163205e427296635f54","image":"https://cdn.schema.io/smashing-magazine/622534d2dae66a0132a1f524/bb597074d7bd34c9c5added311a67086","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:25:22.599Z","filename":null,"height":698,"id":"622534d2dae66a0132a1f524","length":42908,"md5":"bb597074d7bd34c9c5added311a67086","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622534d2dae66a0132a1f524/bb597074d7bd34c9c5added311a67086","width":481},"id":"622534d93b71e90132a9f030"}],"metaDescription":null,"metaTitle":null,"name":"Digital Adaptation (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"digital-adaptation-ebook","slug":"digital-adaptation-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:18.952Z","dateUpdated":"2022-08-03T15:40:44.185Z","delivery":"shipment","description":null,"id":"61b8d162205e427296635ec4","image":"https://cdn.schema.io/smashing-magazine/622679b2ea492101324bb36a/d3edbeed539469376ddef3fafaaa40d9","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:31:30.369Z","filename":null,"height":365,"id":"622679b2ea492101324bb36a","length":24356,"md5":"d3edbeed539469376ddef3fafaaa40d9","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622679b2ea492101324bb36a/d3edbeed539469376ddef3fafaaa40d9","width":342},"id":"622679b6ea492101324bb441"}],"metaDescription":null,"metaTitle":null,"name":"Designing For Email (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"designing-for-email","slug":"designing-for-email","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:17.708Z","dateUpdated":"2022-08-03T15:40:37.171Z","delivery":"shipment","description":null,"id":"61b8d161205e427296635e34","image":"https://cdn.schema.io/smashing-magazine/622674c77f83c101335ae458/c98d691371891f3a7b1b10ccae6d255c","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:10:31.993Z","filename":null,"height":365,"id":"622674c77f83c101335ae458","length":72472,"md5":"c98d691371891f3a7b1b10ccae6d255c","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622674c77f83c101335ae458/c98d691371891f3a7b1b10ccae6d255c","width":342},"id":"622674cb93cebd013241bc03"}],"metaDescription":null,"metaTitle":null,"name":"Designing Better UX (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-designing-better-ux","slug":"smashing-ebook-designing-better-ux","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:17.061Z","dateUpdated":"2022-08-03T15:40:25.418Z","delivery":"shipment","description":null,"id":"61b8d161205e427296635d9c","image":"https://cdn.schema.io/smashing-magazine/6223e1938c7bad01328d67dd/541b210dd963a16956d4fbabd19afb15","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-05T22:17:55.351Z","filename":null,"height":698,"id":"6223e1938c7bad01328d67dd","length":77372,"md5":"541b210dd963a16956d4fbabd19afb15","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6223e1938c7bad01328d67dd/541b210dd963a16956d4fbabd19afb15","width":481},"id":"6223e197852ddd01320db0a5"}],"metaDescription":null,"metaTitle":null,"name":"Design Systems (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"design-systems-ebook","slug":"design-systems-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:16.509Z","dateUpdated":"2022-08-03T15:40:13.829Z","delivery":"shipment","description":null,"id":"61b8d160205e427296635cc0","image":"https://cdn.schema.io/smashing-magazine/622679c4da820101324b66db/693f39caa34903c973f36ae397c76040","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:31:48.730Z","filename":null,"height":365,"id":"622679c4da820101324b66db","length":18476,"md5":"693f39caa34903c973f36ae397c76040","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622679c4da820101324b66db/693f39caa34903c973f36ae397c76040","width":342},"id":"622679c8e347cb01339a4e08"}],"metaDescription":null,"metaTitle":null,"name":"Customizing WordPress (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"customizing-wordpress","slug":"customizing-wordpress","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:15.988Z","dateUpdated":"2022-08-03T15:40:03.046Z","delivery":"shipment","description":null,"id":"61b8d15f205e427296635c40","image":"https://cdn.schema.io/smashing-magazine/622679d4ea492101324bc1bb/07b3afc423df7977b7863e97251d7136","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:32:04.411Z","filename":null,"height":365,"id":"622679d4ea492101324bc1bb","length":28208,"md5":"07b3afc423df7977b7863e97251d7136","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622679d4ea492101324bc1bb/07b3afc423df7977b7863e97251d7136","width":342},"id":"622679d8da820101324bcc77"}],"metaDescription":null,"metaTitle":null,"name":"Creativity Lessons For Web Designers (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-creativity-lessons-for-web-designers","slug":"smashing-ebook-creativity-lessons-for-web-designers","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:15.446Z","dateUpdated":"2022-08-03T15:39:35.739Z","delivery":"shipment","description":null,"id":"61b8d15f205e427296635bc0","image":"https://cdn.schema.io/smashing-magazine/622679e57f83c101336367f4/44ead47078f65eac2e9270f8a48d75fb","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:32:21.217Z","filename":null,"height":365,"id":"622679e57f83c101336367f4","length":76412,"md5":"44ead47078f65eac2e9270f8a48d75fb","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622679e57f83c101336367f4/44ead47078f65eac2e9270f8a48d75fb","width":342},"id":"622679ea7f83c101336368bd"}],"metaDescription":null,"metaTitle":null,"name":"Creating Meaningful Websites (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-creating-meaningful-websites","slug":"smashing-ebook-creating-meaningful-websites","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:14.830Z","dateUpdated":"2022-08-03T15:39:15.717Z","delivery":"shipment","description":null,"id":"61b8d15e205e427296635b10","image":"https://cdn.schema.io/smashing-magazine/6226774393cebd01324573e2/2a8e01c1d88a44f52737d08fa65e5801","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:21:07.606Z","filename":null,"height":365,"id":"6226774393cebd01324573e2","length":60836,"md5":"2a8e01c1d88a44f52737d08fa65e5801","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226774393cebd01324573e2/2a8e01c1d88a44f52737d08fa65e5801","width":342},"id":"6226774893cebd01324576c9"}],"metaDescription":null,"metaTitle":null,"name":"Content Strategy (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"smashing-ebook-content-strategy","slug":"smashing-ebook-content-strategy","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:14.306Z","dateUpdated":"2022-08-03T15:39:27.688Z","delivery":"shipment","description":null,"id":"61b8d15e205e427296635aa0","image":"https://cdn.schema.io/smashing-magazine/62267731da82010132448da8/2c40c5e24b9d88f782d9910693161cfe","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:20:49.258Z","filename":null,"height":365,"id":"62267731da82010132448da8","length":22780,"md5":"2c40c5e24b9d88f782d9910693161cfe","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267731da82010132448da8/2c40c5e24b9d88f782d9910693161cfe","width":342},"id":"6226773693cebd0132456cae"}],"metaDescription":null,"metaTitle":null,"name":"Content Strategy, Vol. 2: Planning, Producing And Maintaining Quality Content (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"content-strategy-vol-2-planning-producing-and-maintaining-quality-content","slug":"content-strategy-vol-2-planning-producing-and-maintaining-quality-content","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:12.821Z","dateUpdated":"2022-08-03T15:39:07.817Z","delivery":"shipment","description":null,"id":"61b8d15c205e427296635a02","image":"https://cdn.schema.io/smashing-magazine/62267882ea49210132497488/6062c1ae57e81bef0f11e74df6b63622","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:26:26.415Z","filename":null,"height":365,"id":"62267882ea49210132497488","length":12968,"md5":"6062c1ae57e81bef0f11e74df6b63622","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267882ea49210132497488/6062c1ae57e81bef0f11e74df6b63622","width":342},"id":"6226788693cebd0132478798"}],"metaDescription":null,"metaTitle":null,"name":"Clients: Friends You Never Had (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"clients-friends-you-never-had","slug":"clients-friends-you-never-had","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:12.175Z","dateUpdated":"2022-08-03T15:39:00.238Z","delivery":"shipment","description":null,"id":"61b8d15c205e427296635972","image":"https://cdn.schema.io/smashing-magazine/62253511dae66a0132a20f98/70e46ceb6cfdc4a4d0833551f2dd0cfa","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:26:25.614Z","filename":null,"height":697,"id":"62253511dae66a0132a20f98","length":116156,"md5":"70e46ceb6cfdc4a4d0833551f2dd0cfa","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253511dae66a0132a20f98/70e46ceb6cfdc4a4d0833551f2dd0cfa","width":480},"id":"6225351eede306013293abf4"}],"metaDescription":null,"metaTitle":null,"name":"Click! How to Encourage Clicks Without Shady Tricks (eBook)","options":[],"popularity":4,"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"click-ebook","slug":"click-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":30,"salePrice":null},"usd":{"price":30,"salePrice":null}},"dateCreated":"2021-12-14T17:16:11.521Z","dateUpdated":"2022-09-22T13:12:37.015Z","delivery":"shipment","description":null,"id":"61b8d15b205e4272966358c2","image":"https://cdn.schema.io/smashing-magazine/62253548dae66a0132a233c7/e7b12874dfcae90fc6fc50303eb3eb0d","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:27:20.471Z","filename":null,"height":697,"id":"62253548dae66a0132a233c7","length":96440,"md5":"e7b12874dfcae90fc6fc50303eb3eb0d","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253548dae66a0132a233c7/e7b12874dfcae90fc6fc50303eb3eb0d","width":480},"id":"62253552dae66a0132a242db"}],"metaDescription":null,"metaTitle":null,"name":"Smart Interface Design Patterns Checklists (Digital)","options":[],"popularity":2,"price":30,"prices":{"eur":{"price":30,"salePrice":null},"usd":{"price":30,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"checklist-cards-digital","slug":"checklist-cards-digital","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:10.996Z","dateUpdated":"2022-08-03T15:38:54.296Z","delivery":"shipment","description":null,"id":"61b8d15a205e427296635832","image":"https://cdn.schema.io/smashing-magazine/622676ec93cebd0132448d0c/e5d48b09f3e8efe86f764e16b6a76fdf","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:19:40.406Z","filename":null,"height":365,"id":"622676ec93cebd0132448d0c","length":43836,"md5":"e5d48b09f3e8efe86f764e16b6a76fdf","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622676ec93cebd0132448d0c/e5d48b09f3e8efe86f764e16b6a76fdf","width":342},"id":"622676f07f83c101335d01b4"}],"metaDescription":null,"metaTitle":null,"name":"Behind The Scenes Of Real-Life Projects (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"behind-the-scenes-of-real-life-projects","slug":"behind-the-scenes-of-real-life-projects","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:10.484Z","dateUpdated":"2022-08-03T15:38:44.304Z","delivery":"shipment","description":null,"id":"61b8d15a205e4272966357a2","image":"https://cdn.schema.io/smashing-magazine/62253589cd4f4d0133c6fe71/4dadc481dd2962191349d62a553f9398","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-06T22:28:25.847Z","filename":null,"height":700,"id":"62253589cd4f4d0133c6fe71","length":165364,"md5":"4dadc481dd2962191349d62a553f9398","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62253589cd4f4d0133c6fe71/4dadc481dd2962191349d62a553f9398","width":481},"id":"62253590cd4f4d0133c7051c"}],"metaDescription":null,"metaTitle":null,"name":"Art Direction for the Web (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"art-direction-for-the-web-ebook","slug":"art-direction-for-the-web-ebook","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-12-14T17:16:09.971Z","dateUpdated":"2022-08-03T15:38:32.771Z","delivery":"shipment","description":null,"id":"61b8d159205e427296635712","image":"https://cdn.schema.io/smashing-magazine/622678d8ce2a0601327aed8e/bfbab4f7b050d3becc9191b88e80e321","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:27:52.598Z","filename":null,"height":365,"id":"622678d8ce2a0601327aed8e","length":29084,"md5":"bfbab4f7b050d3becc9191b88e80e321","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622678d8ce2a0601327aed8e/bfbab4f7b050d3becc9191b88e80e321","width":342},"id":"622678e0da8201013249de5f"}],"metaDescription":null,"metaTitle":null,"name":"Apps For All: Coding Accessible Web Applications (eBook)","options":[],"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"apps-for-all","slug":"apps-for-all","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:09.460Z","dateUpdated":"2022-08-03T15:38:26.607Z","delivery":"shipment","description":null,"id":"61b8d159205e42729663566e","image":"https://cdn.schema.io/smashing-magazine/622674dc93cebd013241e430/6ebebfff53131b3ee7c90bb95a251ee0","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:10:52.570Z","filename":null,"height":365,"id":"622674dc93cebd013241e430","length":24284,"md5":"6ebebfff53131b3ee7c90bb95a251ee0","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/622674dc93cebd013241e430/6ebebfff53131b3ee7c90bb95a251ee0","width":342},"id":"622674e37f83c101335af739"}],"metaDescription":null,"metaTitle":null,"name":"A Field Guide To User Research (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"a-field-guide-to-user-research","slug":"a-field-guide-to-user-research","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:07.887Z","dateUpdated":"2022-08-03T15:38:20.483Z","delivery":"shipment","description":null,"id":"61b8d157205e427296635548","image":"https://cdn.schema.io/smashing-magazine/6226751eea4921013243095f/7bc49537a8ca72cd84f795218f347c15","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:11:58.826Z","filename":null,"height":365,"id":"6226751eea4921013243095f","length":63168,"md5":"7bc49537a8ca72cd84f795218f347c15","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226751eea4921013243095f/7bc49537a8ca72cd84f795218f347c15","width":342},"id":"62267524ea49210132430991"}],"metaDescription":null,"metaTitle":null,"name":"A Field Guide To Usability Testing (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"guide-to-usability-testing","slug":"guide-to-usability-testing","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:07.388Z","dateUpdated":"2022-08-03T15:38:11.709Z","delivery":"shipment","description":null,"id":"61b8d157205e4272966354a3","image":"https://cdn.schema.io/smashing-magazine/6226785f7f83c1013360f0a8/143d368efe4adaff5f9584d355822fb3","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:25:51.425Z","filename":null,"height":365,"id":"6226785f7f83c1013360f0a8","length":24848,"md5":"143d368efe4adaff5f9584d355822fb3","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/6226785f7f83c1013360f0a8/143d368efe4adaff5f9584d355822fb3","width":342},"id":"622678637f83c1013360f0db"}],"metaDescription":null,"metaTitle":null,"name":"A Career On The Web: On The Road To Success (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"a-career-on-the-web-on-the-road-to-success","slug":"a-career-on-the-web-on-the-road-to-success","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"currency":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"dateCreated":"2021-12-14T17:16:06.877Z","dateUpdated":"2022-08-03T15:38:03.224Z","delivery":"shipment","description":null,"id":"61b8d156205e427296635448","image":"https://cdn.schema.io/smashing-magazine/62267870ea492101324972e7/da34292a079274f615ce3288d733fb70","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:26:08.589Z","filename":null,"height":365,"id":"62267870ea492101324972e7","length":24644,"md5":"da34292a079274f615ce3288d733fb70","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267870ea492101324972e7/da34292a079274f615ce3288d733fb70","width":342},"id":"62267874ea492101324973e9"}],"metaDescription":null,"metaTitle":null,"name":"A Career On The Web: Assuming Leadership (eBook)","options":[],"price":4.9,"prices":{"eur":{"price":4.9,"salePrice":null},"usd":{"price":4.9,"salePrice":null}},"productType":"ebook","sale":false,"salePrice":null,"sku":"a-career-on-the-web-assuming-leadership","slug":"a-career-on-the-web-assuming-leadership","stockStatus":null,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"attributes":{},"bundle":false,"categories":["613743e44826af5712d101bc"],"categoryId":"613743e44826af5712d101bc","content":{"productType":"Job Post"},"currency":{"eur":{"price":85,"salePrice":null},"usd":{"price":85,"salePrice":null}},"dateCreated":"2021-09-07T11:08:42.337Z","dateUpdated":"2022-08-03T15:37:42.832Z","delivery":null,"description":null,"id":"6137483a4e4abe56e75caa41","image":"https://cdn.schema.io/smashing-magazine/62267a5193cebd01324dc284/aa48d1a46ce4ca09c1962d9e939e678c","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:34:09.289Z","filename":null,"height":255,"id":"62267a5193cebd01324dc284","length":12592,"md5":"aa48d1a46ce4ca09c1962d9e939e678c","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267a5193cebd01324dc284/aa48d1a46ce4ca09c1962d9e939e678c","width":255},"id":"62267a6604eaa60132243c43"}],"metaDescription":null,"metaTitle":null,"name":"Job Post (freelance)","options":[],"price":85,"prices":{"eur":{"price":85,"salePrice":null},"usd":{"price":85,"salePrice":null}},"productType":"job","sale":false,"salePrice":null,"sku":"job-post-freelance","slug":"job-post-freelance","stockStatus":null,"stockTracking":false,"tags":[],"type":"virtual","variable":false},{"active":true,"attributes":{},"bundle":false,"categories":["613743e44826af5712d101bc"],"categoryId":"613743e44826af5712d101bc","content":{"productType":"Job Post"},"currency":{"eur":{"price":250,"salePrice":null},"usd":{"price":250,"salePrice":null}},"dateCreated":"2021-09-07T11:08:09.240Z","dateUpdated":"2022-08-03T15:37:34.655Z","delivery":null,"description":null,"id":"613748194826af5712d2e2cc","image":"https://cdn.schema.io/smashing-magazine/62267a6a93cebd01324e4509/aa48d1a46ce4ca09c1962d9e939e678c","images":[{"file":{"contentType":"image/png","dateUploaded":"2022-03-07T21:34:34.055Z","filename":null,"height":255,"id":"62267a6a93cebd01324e4509","length":12592,"md5":"aa48d1a46ce4ca09c1962d9e939e678c","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/62267a6a93cebd01324e4509/aa48d1a46ce4ca09c1962d9e939e678c","width":255},"id":"62267a7993cebd01324e8689"}],"metaDescription":null,"metaTitle":null,"name":"Job Post (full-time)","options":[],"popularity":2,"price":250,"prices":{"eur":{"price":250,"salePrice":null},"usd":{"price":250,"salePrice":null}},"productType":"job","sale":false,"salePrice":null,"sku":"job-post-full-time","slug":"job-post-full-time","stockStatus":null,"stockTracking":false,"tags":[],"type":"virtual","variable":false},{"active":true,"attributes":{},"bundle":false,"categories":["60401301ec11a07e4cad95d5"],"categoryId":"60401301ec11a07e4cad95d5","content":{"productType":"eBook"},"cost":null,"currency":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"dateCreated":"2021-03-03T22:54:45.550Z","dateUpdated":"2022-08-19T05:26:55.303Z","delivery":"shipment","description":null,"id":"604013b51f396b2d797f2281","image":"https://cdn.schema.io/smashing-magazine/616ffa16f05bf77793714672/bc97d51c331aac0d8af6400435892f8b","images":[{"file":{"contentType":"image/png","dateUploaded":"2021-10-20T11:14:30.371Z","filename":null,"height":365,"id":"616ffa16f05bf77793714672","length":30844,"md5":"bc97d51c331aac0d8af6400435892f8b","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/616ffa16f05bf77793714672/bc97d51c331aac0d8af6400435892f8b","width":311},"id":"616ffa1787f97378719a30cf"}],"metaDescription":null,"metaTitle":null,"name":"TypeScript in 50 Lessons (eBook)","options":[],"popularity":17,"price":19,"prices":{"eur":{"price":19,"salePrice":null},"usd":{"price":19,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"sku":"typescript-in-50-lessons-ebook","slug":"typescript-in-50-lessons-ebook","stockStatus":null,"stockTracking":false,"tags":[],"taxClass":"standard","type":"standard","variable":false},{"active":true,"attributes":{},"bundle":false,"bundlePrices":{"bookEur":null,"bookUsd":null,"ebookEur":null,"ebookUsd":null,"eur":{"price":63,"salePrice":48.75},"usd":{"price":63,"salePrice":48.75}},"categories":["604012f944c4172b406668c7"],"categoryId":"604012f944c4172b406668c7","content":{"productType":"Book"},"cost":null,"crossSellProductId":"604013b51f396b2d797f2281","crossSells":[{"currency":{"eur":{"discountAmount":""},"usd":{"discountAmount":null}},"discountAmount":null,"discountPercent":75,"discountType":"percent","id":"62ea94c22989946816bea200","productId":"604013b51f396b2d797f2281"}],"currency":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"dateCreated":"2021-03-03T22:53:27.211Z","dateUpdated":"2022-08-26T14:55:40.286Z","delivery":"shipment","description":null,"digitalProductId":"604013b51f396b2d797f2281","dimensions":null,"id":"604013677f471638aff822c3","image":"https://cdn.schema.io/smashing-magazine/616ffa2087f97378719a30f7/dceb0747379f9ae1eb898d207e00c088","images":[{"file":{"contentType":"image/png","dateUploaded":"2021-10-20T11:14:40.181Z","filename":null,"height":698,"id":"616ffa2087f97378719a30f7","length":49784,"md5":"dceb0747379f9ae1eb898d207e00c088","metadata":null,"url":"https://cdn.schema.io/smashing-magazine/616ffa2087f97378719a30f7/dceb0747379f9ae1eb898d207e00c088","width":481},"id":"616ffa220dc002781addb9ff"}],"metaDescription":null,"metaTitle":null,"name":"TypeScript in 50 Lessons (Print)","options":[],"popularity":17,"price":44,"prices":{"eur":{"price":44,"salePrice":null},"usd":{"price":44,"salePrice":null}},"productType":"book","sale":false,"salePrice":null,"shipmentDimensions":null,"shipmentPackageQuantity":null,"shipmentPrices":[],"shipmentWeight":null,"sku":"typescript-in-50-lessons","slug":"type-script-in-50-lessons-book","stockPurchasable":true,"stockStatus":"out_of_stock","stockTracking":true,"tags":[],"taxClass":"standard","type":"standard","upSells":[],"variable":false}]')}catch(a){}window.PRERELEASES={},window.PAGE_TYPE="articles",'serviceWorker'in navigator&&!localStorage.getItem('no_sw')&&window.addEventListener('load',function(){navigator.serviceWorker.register('/sw.js').then(()=>{window.caches.open('smashing-mag-offline-articles').then(a=>a.keys()).then(a=>{var d=document.querySelector('.meta-box--article'),f,b,c,e;d&&a&&a.length&&(f=a.find(a=>a.url===window.location.href)),b=document.querySelector('.offline-articles-list'),b&&a&&a.length&&(c=document.createElement('li'),e=a.map(function(a){return'<li><a href="'+a.url+'">'+a.url+'</a></li>'}).join(''),c.innerHTML='Recently viewed aritcles: <ul>'+e+'</ul>',b.appendChild(c))})}).catch(function(a){console.error('Failed to load service worker')})})</script><div hidden=""></div><link rel="stylesheet" href="/css/print.css" type="text/css" media="print"><script class="js-additional" fetchpriority="low" delay="/js/instantpage.js" type="module" defer="" src="/js/instantpage.js"></script><script class="js-additional" fetchpriority="low" delay="/js/ga.js" defer="" src="/js/ga.js"></script><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-CXX395KXNG"></script><script>const autoLoadDuration=5,eventList=["keydown","mousemove","wheel","touchmove","touchstart","touchend"],autoLoadTimeout=setTimeout(runScripts,5e3);function triggerScripts(){runScripts(),clearTimeout(autoLoadTimeout),eventList.forEach(function(a){window.removeEventListener(a,triggerScripts,{passive:!0})})}function runScripts(){document.querySelectorAll("script[delay]").forEach(function(a){a.setAttribute("src",a.getAttribute("delay"))})}const params=new URLSearchParams(window.location.search);params.get('coupon')?runScripts():eventList.forEach(function(a){window.addEventListener(a,triggerScripts,{passive:!0})})</script>
<script async="" id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="cc82a7ab-dc0f-450c-bcf5-581dd60e8a03" data-netlify-deploy-branch="master" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiY2M4MmE3YWItZGMwZi00NTBjLWJjZjUtNTgxZGQ2MGU4YTAzIiwiYWNjb3VudF9pZCI6IjVhMGYzNDI1NGM0YjkzMmE4YmJhNDVmYiIsImRlcGxveV9pZCI6IjY2NGZmNGQzZjBkOTJiMDAwODIwYWZjMiIsImlzc3VlciI6Im5mc2VydmVyIn0.emvsOa-7ttBDz9yFPmpSg-GMwcBudfGYCoUk-WIUl-k"></script></body>